当前位置：首页 > news >正文

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

news 2025/7/26 16:55:12

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 click
hanldeLazyLoad(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) => {// 获取级联节点中的codeconst 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);}