使用el-cascader和vue3封装一个省市县级联组件

好的，以下是使用`el-cascader`和Vue3封装的省市县级联组件示例代码：

<template>
  <el-cascader
    :options="options"
    :props="{ value: 'name', label: 'name', children: 'children' }"
    :change-on-select="true"
    v-model="selectedValues"
    @change="handleChange"
  />
</template>

<script>
import { reactive, toRefs } from 'vue'
import { getCities } from '@/api/city' // 此处需要自己实现获取城市数据的方法

export default {
  setup() {
    const state = reactive({
      options: [],
      selectedValues: [],
    })

    // 初始化省市县数据
    const initOptions = async () => {
      const provinces = await getCities()
      state.options = provinces.map(province => ({
        name: province.name,
        children: province.cities.map(city => ({
          name: city.name,
          children: city.districts.map(district => ({
            name: district.name,
          })),
        })),
      }))
    }

    // 监听选中值的变化
    const handleChange = (value) => {
      state.selectedValues = value
      // 在这里可以触发选中值变化的回调函数
    }

    // 初始化省市县数据
    initOptions()

    // 返回 selectedValues 和 handleChange，以便在父组件中使用
    return {
      ...toRefs(state),
      handleChange,
    }
  },
}
</script>

上述代码中，我们使用了`reactive`和`toRefs`来创建响应式数据，使用`getCities`方法获取省市县数据，初始化`options`选项，当选中值发生变化时触发`handleChange`回调函数。在父组件中使用该组件时，只需要监听`selectedValues`和`handleChange`即可。需要注意的是，`getCities`方法需要自己实现，可以从后端接口获取数据或者使用本地静态文件。