vue+elementui实现地址三级联选择

先看效果：
实现方法：

1.首先安装一下省市区的数据：

npm install element-china-area-data -S

2.然后在页面中引入安装好的数据：

import {regionData, codeToText} from "element-china-area-data";

3.在页面中使用：

  <el-form ref="form" :model="formData" label-width="80px">
      <el-form-item label="选择地址" label-width="90px">
        <el-cascader
            style="width: 100%"
            clearable
            :options="regionDatas"
            :props="dataProps"
            v-model="formData.address"
            @change="changes"
        ></el-cascader>
      </el-form-item>
      <span>所选地址：{{address}}</span>
    </el-form>

4.需要定义的数据：

data() {
    return {
      formData: {
        address: [],
      },
      address:'',
      regionDatas: regionData,
      dataProps: {
        value: "value",
        label: "label",
        children: "children",
      },
    }
  },

5.选择省市区时调用的方法：

changes(value) {
      console.log(value);
      this.formData.address = value;
      let name = "";
      this.formData.address.map((item) => (name += codeToText[item] + "")); //将省市区三个拼接一起
      this.address = name;
      console.log(name, '具体地址');

这样就实现地址选择了，formdata.address是所选地址的编号，address是所选地址的中文地址。