vue3结合el-cascader实现省市区三级联动

Vue3是一种流行的JavaScript框架，而el-cascader是一个基于Vue的级联选择器组件。结合Vue3和el-cascader可以很方便地实现省市区三级联动功能。

首先，你需要在项目中安装Vue3和el-cascader。可以使用npm或者yarn进行安装。

接下来，在你的Vue组件中引入el-cascader组件，并在data中定义一个数组用于存储省市区数据。你可以通过接口请求或者本地数据来获取省市区数据。

然后，在模板中使用el-cascader组件，并将省市区数据绑定到el-cascader的options属性上。通过设置props属性，你可以指定级联选择器的显示文本和值的字段名。

最后，你需要监听el-cascader的change事件，在事件处理函数中获取选择的省市区数值，并进行相应的处理。

下面是一个简单的示例代码：

<template>
  <div>
    <el-cascader
      v-model="selectedValues"
      :options="options"
      :props="props"
      @change="handleCascaderChange"
    ></el-cascader>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      selectedValues: [], // 存储选择的省市区数值
      options: [], // 省市区数据
      props: {
        value: 'value', // 值字段名
        label: 'label', // 显示文本字段名
        children: 'children' // 子级字段名
      }
    };
  },
  mounted() {
    // 获取省市区数据，可以通过接口请求或者本地数据获取
    this.options = [
      {
        value: '1',
        label: '省份1',
        children: [
          {
            value: '11',
            label: '城市1',
            children: [
              {
                value: '111',
                label: '区域1'
              },
              {
                value: '112',
                label: '区域2'
              }
            ]
          },
          {
            value: '12',
            label: '城市2',
            children: [
              {
                value: '121',
                label: '区域1'
              },
              {
                value: '122',
                label: '区域2'
              }
            ]
          }
        ]
      },
      // 其他省市区数据...
    ];
  },
  methods: {
    handleCascaderChange(value) {
      // 处理选择的省市区数值
      console.log(value);
    }
  }
};
</script>

这样，你就可以实现省市区三级联动功能了。