elementui省市县三级联动

element-ui提供了el-cascader级联选择器组件，可以实现省市县三级联动。具体实现步骤如下：

1. 引入el-cascader组件

<template>
  <el-cascader
    :options="options"
    :props="props"
    v-model="selectedOptions"
    @change="handleChange"
    placeholder="请选择省/市/区"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: []
    };
  },
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      // 获取省市区数据
      // ...
      this.options = data;
    },
    handleChange(value) {
      this.selectedOptions = value;
      this.$emit("input", value);
    }
  }
};
</script>

2. 获取省市区数据

可以通过接口获取省市区数据，也可以在前端直接定义一个数组来存储省市区数据。

3. 设置props属性

设置props属性，将options和props传递给el-cascader组件。

props: {
  value: {
    type: Array,
    default: () => []
  },
  options: {
    type: Array,
    default: () => []
  },
  props: {
    type: Object,
    default: () => ({
      value: "value",
      label: "label",
      children: "children"
    })
  }
}

4. 监听change事件

监听change事件，将选中的省市区数据保存到selectedOptions中，并通过$emit方法将选中的省市区数据传递给父组件。

handleChange(value) {
  this.selectedOptions = value;
  this.$emit("input", value);
}