解决 elementui el-cascader组件懒加载时存在选中状态丢失的问题?
javascript
<el-cascader
ref="cascader"
v-model="curList"
:show-all-levels="false"
:options="classList"
:props="cascaderProps"
clearable
filterable
style="width: 100%"
placeholder="选择"
@change="handleChange"
/>
javascript
data(){
return{
curList:[],
classList:[],
cascaderProps: {
checkStrictly: true,
multiple: true,
children: 'sonList',
value: 'id',
label: 'name',
leaf: 'leaf',
lazy: true,
lazyLoad: this.lazyLoadCascader
}
}
},
methods:{
async lazyLoadCascader(node, resolve) {
const { checked } = node
if (node.level === 0) {
const list = await this.getClassList(1) // 获取数据,返回数组类型
this.externalKnowclassList = list
this.initSelectedCascaderdata() // 修改操作,初始化已选节点
// eslint-disable-next-line require-atomic-updates
node.data = list
resolve(list)
} else {
const { id, type, sonList } = node.data
if (this.$utils.isNotEmptyArray(sonList)) {
resolve([])
} else {
const list = await this.getClassList(type + 1, id) // 获取数据,返回数组类型
// eslint-disable-next-line require-atomic-updates
node.data.sonList = list
resolve(list)
}
// 解决 el-cascader 懒加载时选中状态丢失的问题
const cascader = this.$refs.cascader
node.doCheck(checked) // 更新节点的选中状态
cascader.panel.handleExpand(node) // 展开当前节点
cascader.panel.calculateMultiCheckedValue() // 重新计算多选状态下的选中值
}
},
}