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>