重庆市公司网站备案在哪了/网站首页快速收录
优雅的reCreate Cascader
父组件 reCreate 级联选择控件,处理cascader组件 lazy加载时级联回显问题
<!-- 父组件 -->
......
<el-form-item label="Regiona"><!-- 借用唯一值key,使组件更新时同时重新创建RegionaCascade组件 --><regional-cascade :key="form.id" v-model="area" />
</el-form-item>
......
<!-- 子组件 cascader -->
<template><el-cascader ref="cascader" v-model="areaN" :props="props" @change="expandChange" />
</template><script>
import * as area from '@/api/tools/regionalCascade'
export default {name: 'RegionalCascade',model: {prop: 'area',event: 'change-area'},props: {area: {type: Array,required: true}},data() {return {areaN: this.area || [],props: {lazy: true,value: 'code',label: 'name',lazyLoad(node, resolve) {if (node.root) {area.provinceList().then(res => {resolve(res.provinceRecords.map(p => {return {...p,leaf: false,type: 'province'}}))})} else if (node.data.type === 'province') {area.cityList({provinceCode: node.data.code}).then(res => {resolve(res.cityRecords.map(c => {return {...c,leaf: false,type: 'city'}}))})} else {area.areaList({cityCode: node.data.code}).then(res => {resolve(res.areaRecords.map(a => {return {...a,leaf: true,type: 'area'}}))})}}}}},methods: {expandChange(v) {this.$emit('change-area', v)}}
}
</script>