html片段
<div style="margin:20px">
<el-cascader v-model="value" :options="oneList" @change="oneChange"></el-cascader>
<el-cascader v-model="valuetwo" :options="twoList" @change="twoChange"></el-cascader>
<el-cascader v-model="valuethree" :options="threeList"></el-cascader>
</div>
script代码
<script>
data() {
return {
// 一级的value
value: [],
valuetwo: [],
valuethree: [],
// 所有的省
oneList: [],
// 市
twoList: [],
threeList: [],
// 一级省的id
oneId: '',
twoId: ''
}
},
created() {
this.getOneList()
},
methods: {
async getOneList() {
const { data } = await areaList()
this.oneList = data.map(item => ({ label: item.name, value: item.id }))
},
// 点一级获取二级
async oneChange(val) {
// val是回调里面的默认参数
this.oneId = val[0]
const { data } = await areaList({ parentId: this.oneId })
this.twoList = data.map(item => ({ label: item.name, value: item.id }))
},
// 点二级获取三级
async twoChange(val) {
this.twoId = val[0]
const { data } = await areaList({ parentId: this.twoId })
this.threeList = data.map(item => ({ label: item.name, value: item.id }))
}
}
</script>