解决 elementui el-cascader组件懒加载时存在选中状态丢失的问题?

解决 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() // 重新计算多选状态下的选中值
      }
    },
}
相关推荐
拖孩16 分钟前
AI 帮我写的小程序「厨菜记」上线满月了,挣了两百块!!!
前端·后端·微信小程序
用户3600555790017 分钟前
Kestrel_VLLM - 13 · 为什么排除 MoE FFN Tiling 与 Tensor Core
前端
Hilaku26 分钟前
AI 流式输出都用 SSE,什么时候必须换 WebSocket?
前端·javascript·程序员
奇牙coding35 分钟前
Codex CLI 升级后多文件编辑静默失效:config.yaml 枚举变更排查与修复指南
java·前端·javascript·ai
小羊没烦恼!41 分钟前
Ajax与JSON的一些总结
android·java·前端·数据库·mysql·算法·okhttp
程序员老赵43 分钟前
Docker 部署 Filestash:轻松搭建浏览器文件管理平台
前端·docker·开源
夏天要喝冰可乐1 小时前
给 23 万字修仙小说造个阅读站:浏览器内打包 EPUB 分页阅读 + 三主题实战
前端·产品·全栈
茶底世界之下1 小时前
林间步道要不要加暗角?用 Awaking 把强度收在20%
前端·ios·图片资源
执子念的飞鱼1 小时前
纯前端预览 275 种文件格式是怎么做到的
前端·vue.js·react.js
行者全栈架构师1 小时前
【鸿蒙心迹】互动卡片全链路——把核心功能放到桌面(FormKit 实战)(HarmonyOS 7.x)
前端·算法·架构