Vue2 element cascader级联选择器懒加载编辑时回显数据

Vue2 element cascader级联选择器懒加载编辑时回显数据

element cascader组件渲染大量数据时会造成页面渲染卡顿，给用户造成不好的体验，因此在这种情况下都会采用懒加载方式展示数据，但是会造成一个问题，就是编辑表单时由于cascader数据还没有加载，那么已选择的数据无法回显，下面是解决方案(递归元素click事件触发cascader-lazyLoad事件)，我这里是有三个动态表单，级联时五层数据结构，回显200+条数据时虽然还有点稍微卡顿，但我这边一般选不到这么多数据，只是为了测试，但已经比一开始直接渲染时好很多，如果是回显数据少的情况下和正常效果一样

 mounted() { // 一定要缓存一份选择的回显数据，不然html click时会清空已选择的数据，导致子级无法递归 this.tempTagValues = JSON.parse(JSON.stringify(this.itemValue.tagConditions)); // 500毫秒后再渲染标签，防止多个组件渲染卡顿 setTimeout(() => { this.isTag = true; }, this.tagTime); }

el-cascader组件配置，通过popper-class加随机数设置唯一className防止动态表单存在相同组件，通过默认slot配置级联html元素下面方法递归需要通过html click事件，isTag是动态表单时添加的一个定时渲染，每500毫秒渲染一个el-cascader组件，可以更好的提升渲染效果

// 标签懒加载方法const handleTagChildren = (paths, options) => { const code = paths.shift(); const tagItem = options.find((item) => item.code === code); if (paths.length) { return handleTagChildren(paths, tagItem.children); } return (tagItem.children || []).map((item) => { return { ...item, children: [] }; });};

// el-cascader组件懒加载触发初始时，调用级联子级html clickhanldeLazyLoad(node, resolve) { if (node.level === 0) { const list = this.tagOptions.map((item) => { return { ...item, children: [] }; }); resolve(list); // 加载完第一级联时递归加载已选择级联 this.$nextTick(() => { this.handleTagClick(this.tempTagValues); // 隐藏级联选择层 setTimeout(() => { this.$refs.tagCascader.dropDownVisible = false; }, 0); }); } else { // 这里按照你的数据格式做懒加载处理 resolve(handleTagChildren([...node.path], this.tagOptions)); } }

handleTagClick(data) { if (!data.length) { return 0; } const paths = data.shift(); const handle = (index) => { this.$nextTick(() => { // 获取级联节点，从第一级开始 const tagEls = document.querySelectorAll(`.event-rule-tag-${this.brandSeriesKey} .tag-item-${index}`); tagEls.forEach((el) => { // 获取级联节点中的code const code = el.dataset.code; if (paths[index] === code) {  if (paths.length - 1 === index) { // 如果是最后一级节点则check点击 el.parentNode.previousElementSibling.click();  } else { // code相等则级联节点点击 el.parentNode.parentNode.click(); if (data.length) {  this.handleTagClick(data); }  }  handle(index + 1); } }); }); }; handle(0); }