省市下拉框的使用过程

1先把city.js引入进来

import TestData from './citydata.js' // 引入josn文件

2在data中

 // 省份
      TestData: [],
      // 城市
      city: [],
      addForm:{
        province: '', // 省
        city: '', // 市
      }

3在created中

  this.TestData = TestData
    // console.log(TestData)打印一下这个

4 在methods中

 async provinceChange(val) {
    this.addForm.city = '' // 清除之前选项好的城市
      const res = this.TestData
      const i = res.findIndex(item => {
        return item.value === val
      })
      this.city = res[i].children
      console.log('1')
    },

5在模板中

 <el-form-item label="城市" prop="city">
          <el-select
            v-model="addForm.province"
            placeholder="请选择"
            class="size205"
            prop="city"
            @change="provinceChange"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="(item, i) in TestData"
              :key="i"
            ></el-option>
          </el-select>
          <el-select
            v-model="addForm.city"
            placeholder="请选择"
            class="size195"
            prop="city"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="(item, i) in city"
              :key="i"
            ></el-option>
          </el-select>
        </el-form-item>