elementUI＋element-china-area-data实现省市区三级联动

线上页面代码

　　　　　　　　<el-row :gutter="20">
              <el-form-item label="详细地址:" prop="area">
                <el-col :span="4">
                  <el-select v-model="address1" placeholder="省">
                    <el-option
                      v-for="item in option"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="address2" placeholder="市">
                    <el-option
                      v-for="item in address2City"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="address3" placeholder="区">
                    <el-option
                      v-for="item in address3City"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-col>
                <el-col :span="12">
                  <el-form-item>
                    <el-input v-model="address" placeholder="请输入详细地址" />
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-row>

 引入 element 城市JSON库

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

定义变量

data(){
  return{
      address1: "",
      address2: "",
      address3: "",
      address: "",
      }
}        

使用计算属性

computed: {
    address2City() {
      if (this.address1 == "") return [];
      else
        return this.option.filter((val, index) => {
          return val.value == this.address1;
        })[0].children;
    },
    address3City() {
      if (this.address2 == "") return [];
      else
        return this.address2City.filter((val, index) => {
          return val.value == this.address2;
        })[0].children;
    },
  },

使用侦听器

watch: {
    address1(val) {
      this.address2 = "";
      this.address3 = "";
    },
  },