Utilice el-cascader para crear un cuadro de selección de ciudad

<template>
  <el-cascader
    ref="myCascader"
    v-model="value"
    :options="options"
    :props="{ expandTrigger: 'hover' }"
    @change="handleChange"
    clearable
  ></el-cascader>
</template>

<script>
import { cityData } from "@/utils/area";// 城市数据，这个太长了，不好单独拿出来
export default {
  created() {
    this.options = cityData; // 赋值
  },
  data() {
    return {
      value: "",
      options: "",
    };
  },

  methods: {
    async handleChange(value) {
      await this.$nextTick(); // 看情况加 我这里不加 $nextTick() 获取到的 inputValue 是上次的值
      let labelValue = this.$refs["myCascader"].inputValue;
      console.log(labelValue); // 北京市 / 北京市 / 东城区  这个获取到原始数据
      let str = labelValue.replace(/ /g, ""); // 将数据处理
      const arr = str.split("/");
      console.log(arr); // ['北京市', '北京市', '东城区']
      console.log(value); // 这个 value 组件是 element自带的 ['110000', '110100', '110101', __ob__: Observer] 
    },
  },
};
</script>