解决 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() // 重新计算多选状态下的选中值
      }
    },
}
相关推荐
名字还没想好☜5 分钟前
Next.js App Router 数据获取:fetch 缓存、revalidate 与 dynamic 一次讲清
前端
成都渲染101云渲染66664 小时前
如何在3ds Max中实现更快、更高质量的渲染
前端·javascript·人工智能
闲猫6 小时前
Spring AI 对接Deepseek ChatModel 聊天对话
java·前端·spring
自信的未来8 小时前
JSON 工具|Web Worker 工程化打包 + 语法自动修复 + 多语言代码生成实战
java·前端·json
SRET8 小时前
Mineradio 沙盒隔离安装完全指南 | 一键安全运行 Electron 应用!!!
javascript·经验分享·安全·electron·aigc·音视频·ai编程
全栈前端老曹8 小时前
【MongoDB】安全与权限管理 —— 用户认证、角色权限、SSL 加密
前端·javascript·数据库·安全·mongodb·nosql·ssl
zhangxingchao9 小时前
AI大模型核心八:从 Agent Skill、长文档 RAG 到知识库更新与训练策略
前端·人工智能·后端
zhangxingchao10 小时前
AI大模型核心七:从 Workflow、RAG、记忆治理到幂等性
前端·人工智能·后端
gyx_这个杀手不太冷静10 小时前
Agent开发进阶指南(第 1 章):AI Agent 到底是什么?
前端·agent·ai编程
小小小小宇11 小时前
模型相关知识
前端