sl-sfy-safety/src/views/comp/region/index.vue

<template>
  <PageWrapper title="地区" content="地区组件，用于选择省市区，比如填写地址，配送地址，等...">
    <el-card :bordered="false" class="mt-3 proCard">
      <el-alert title="添加场景" type="info"> 自动加载数据，显示省市区</el-alert>
      <Region
        class="mt-3 Region"
        labelField="areaName"
        valueField="areaId"
        @change="regionChange"
      />
      <el-divider />

      <el-alert title="回显场景" type="info"> 设置默认值，自动加载数据，并且选中</el-alert>
      <Region
        v-model:value="regionIds"
        class="mt-3 Region"
        labelField="areaName"
        valueField="areaId"
        @change="regionChange"
      />
      <el-divider />

      <el-alert title="只显示省市" type="info" />
      <Region
        v-model:value="regionIds"
        :hideArea="true"
        class="mt-3 Region"
        labelField="areaName"
        valueField="areaId"
        @change="regionChange"
      />
      <el-divider />

      <el-alert title="只显示省" type="info" />
      <Region
        :onlyProvince="true"
        class="mt-3 Region"
        labelField="areaName"
        valueField="areaId"
        @change="regionChange"
      />
    </el-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Region } from '@/components/Region';

  const regionIds = ref([1, 11, 111]);

  //地区变动回调
  function regionChange(result) {
    console.log(result);
  }
</script>

<style lang="scss">
  .Region {
    width: 320px;
  }
</style>