解决 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() // 重新计算多选状态下的选中值
      }
    },
}
相关推荐
是罐装可乐1 天前
前端架构知识体系:通过发布-订阅者模式解耦路由和请求
前端·架构·vue·路由
杀死那个蝈坦1 天前
监听 Canal
java·前端·eclipse·kotlin·bootstrap·html·lua
程序员小寒1 天前
Vue.js 为什么要推出 Vapor Mode?
前端·javascript·vue.js
白菜__1 天前
去哪儿小程序逆向分析(酒店)
前端·javascript·爬虫·网络协议·小程序·node.js
前端老曹1 天前
Jspreadsheet CE V5 使用手册(保姆版) 二
开发语言·前端·vue.js·学习
IT_陈寒1 天前
SpringBoot3.0实战:5个高并发场景下的性能优化技巧,让你的应用快如闪电⚡
前端·人工智能·后端
秋邱1 天前
AR 定位技术深度解析:从 GPS 到视觉 SLAM 的轻量化实现
开发语言·前端·网络·人工智能·python·html·ar
云飞云共享云桌面1 天前
佛山某机械加工设备工厂10个SolidWorks共享一台服务器的软硬件
大数据·运维·服务器·前端·网络·人工智能·性能优化
开发者小天1 天前
React中使用classnames的案例
前端·react.js·前端框架
简单的话*1 天前
Logback 日志按月归档并保留 180 天,超期自动清理的配置实践
java·前端·python