位置: IT常识 - 正文

el-cascader 动态加载选项、编辑时数据回显问题、单选不加载下一级节点、点击标签选中(el-cascader动态加载多级)

编辑：rootadmin

el-cascader 动态加载选项、编辑时数据回显问题、单选不加载下一级节点、点击标签选中

推荐整理分享el-cascader 动态加载选项、编辑时数据回显问题、单选不加载下一级节点、点击标签选中(el-cascader动态加载多级)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:el-cascader 动态加载默认值,el-rate如何动态绑定数据,elementui cascader动态绑定值,elementui cascader动态绑定值,el-cascader 动态加载默认值,el-rate如何动态绑定数据,el-cascader 动态加载,element cascader动态加载,内容如对您有帮助，希望把文章链接给更多的朋友！

网上看了一圈，很多是选项层级固定死3层而不是随意多少层都可以的，还有很多讲不清楚的，填个坑，希望能帮到有缘人。

实现该效果，需要后端配合需要提供2个接口：

1.前端传入指定节点ID，返回该节点的下一层所有节点ID信息列表。

2.前端传入指定节点ID，返回该节点从顶部节点至下（到该节点）的所有节点ID列表。

级联选择器 el-cascader 使用：

<el-cascaderv-model="IdList":props="props"></el-cascader>

最关键的只有这两项：v-model绑定值和 props 配置项

一、动态加载选项

props配置：

动态加载选项不需要 :options 配置，静态的才需要。

props: { checkStrictly: true, //是否可以选择树干节点作为选项 lazy: true, // 是否动态加载子节点 // lazyLoad加载动态数据的方法(仅在 lazy 为 true 时有效) lazyLoad: this.loadTreeNode,},

远程加载节点的js方法：

//加载树节点首次加载页面时就会执行一次loadTreeNode(node, resolve) { console.log(node); // 首次加载时 node为{root:true,level:0} // node 节点数据获取node的level字段的值 const { level } = node; //下一层节点 const nodes = []; //如果有子节点或者为根节点（即首次进入level为0） //也有人写成 node.level == 0 作用是一样的 if (node.hasChildren || node.root) { // 0 代表第一次请求 let nodeId = level == 0 ? null : node.value; //这里setTimeout的目的是显示加载动画 setTimeout(() => { //调用后端接口获得返回数据 let ret = this.api(nodeId); if (ret && ret.succeeded) { //ret.reulst为后端返回的数据 let nodes = ret.result; // 回调渲染下一层 resolve(nodes); } else { //后端报错弹窗提示失败 this.$message({ type: "error", message: "部门层级加载失败，请联系管理员！", }); } }, 1); } else { //如果没有子节点就不发起请求，直接渲染，也避免了点击叶子节点仍然有加载动画的问题 resolve(nodes); }},

叶子节点指的是：没有子节点的节点，它就是最底层。

这里就需要后端提供第一个接口：

1.前端传入指定节点ID，返回该节点的下一层所有节点ID信息列表（sql查询parentGroupID为指定节点ID的数据即可）。

返回的数据需要是一个列表，后端返回的数据 List<UserGroupTreeNode> 长这样：

后端的节点定义（可参考）：

@Data@AllArgsConstructor@NoArgsConstructorpublic class UserGroupTreeNode { /** * 节点值 */ private String value; /** * 节点标签 */ private String label; /** * 是否为叶子节点（即没有子节点） true 没有子节点 false 有子节点 */ private Boolean leaf;}

其中value即为节点的ID，label为展示的名称，leaf为是否含有子节点，Bool类型。

value，label，leaf 变量名称最好是不要变，如果后端提供的变量名是其他名称，前端拿到之后，自己转一下也行

二、数据回显问题：

在对该条数据点击编辑的时候，选择框内需要展示选中的数据，并且点击展开的选项中，也应该选中该条记录，效果如下：

这里就需要后端提供第二个接口：

2.前端传入指定节点ID，后端返回该节点从顶部节点至下（到该节点）的所有节点ID列表。

格式如下图：

需要特别注意的是顺序！

前端拿到它后，复制给 el-cascader 组件v-model绑定的值即可。

这里的原理就是，前端在新增功能中，提交数据给后端的时候，v-model绑定的参数的值，也是这样的列表形式，所以当绑定值写为这样的列表时，也就能用来回显展示。

el-cascader 动态加载选项、编辑时数据回显问题、单选不加载下一级节点、点击标签选中(el-cascader动态加载多级)

而因为后端一般只存最后一个节点（即选中的节点）的数据，我们提交时，也只提交最后一个节点的数据.......或者全部提交，让后端去处理。

所以需要后端开一个接口，查找该接节点之前的各个节点的数据，并放入同一个数组返回，前端再将数据直接写回v-model绑定的参数就行了。

这样就处理完成了，但是有一个问题，应该算是element-ui的BUG，就是只有在首次加载页面后，编辑数据A时，数据A回显一切正常，关闭弹窗，再编辑其他任何数据时，此时弹窗中，el-cascader 组件文本框中，回显都为空。

这个问题，最核心的原因是：

首次编辑数据时，会根据v-model绑定的参数值，

比如["1","2","3","4"] 这个数组

逐层调用lazyLoad获取整个树结构，

即：依次将 "1","2","3","4"作为参数，调用lazyLoad，分别渲染头结点"1"，头结点下一层，ID为节点"2"的下一层，以及下一层中，ID为“3”的下一层，最后整个合并起来。

整个过程是组件自动完成的。

所以能正确回显。

但是当关闭编辑弹窗，再编辑其他数据时，虽然el-cascader 组件v-model绑定的参数值发生了变化，但是没有再调用lazyLoad方法再逐层请求后端渲染整个结构树。

所以目前网上的解决办法总体有两种思路：

1.给el-cascader组件绑定 options选项，根据v-model绑定参数的值，也就是数组的值，手动调用后端接口，逐个获取下一层的选项，拼接成树结构，将生成树结构给 el-cascader 使用，这样就能正确回显。这种思路其实本质上就是自己写lazyLoad的逻辑，放弃使用官方提供的lazyLoad方法。2.将 el-cascader 组件重新渲染一次，既然首次加载的时候能正确调用lazyLoad，那每次都重新来，都当成首次加载就好了，这就是用v-if解决的思路。

两种解决思路没有什么优劣之分，本质都是打补丁。希望element-ui官方能修复这个问题，这样我们也不用折腾了。

思路二解决起来更简单，这里使用的也是思路二解决：

<el-cascaderv-if="editCascaderVisible"v-model="IdList":props="props"></el-cascader>

然后在editRow方法时，手动控制它刷新一次：

editRow(rowData) {this.editCascaderVisible = false;// 这里搞个定时器重新载入一下组件就可以触发组件拉取数据setTimeout(() => {this.editCascaderVisible = true;}, 1);this.IdList= [];//在编辑的时候等到DOM更新完成再赋值this.$nextTick(() => { //将选中数据的值赋值给表单this.dataForm = Object.assign({}, rowData);}); //调用后端接口，获取自顶向下逐个层级ID的列表 this.IdList= this.api_getIdList(rowData.groupId); //打开修改弹窗this.dialogVisible = true;}

这样每次点击编辑的时候，就都能正确回显了。

三、点击单选框选中节点不加载下一级选项

因为我们使用的是lazyLoad模式，点击单选框选中时，不会触发加载下一级选项，如图：

解决办法：

<el-cascader@change="handleChange"v-if="editCascaderVisible"v-model="IdList":props="props"></el-cascader>//处理单选点击事件handleChange(e) {this.$nextTick(() => {const dom = document.getElementsByClassName("el-radio is-checked");//这里我把dom打出来看了最后一个选项才是我选中的节点即[length-1] 有的博主写的是第一个元素即[0] 大家自行尝试let radioDom = dom[dom.length - 1];const brother = radioDom.nextElementSibling;brother.click();});},

原理：我们点击标签即label，组件就会触发加载下一级节点，所以当选中的节点发生变化时，我们手动触发点击它的同级下一个元素，也就是label，达到加载下一级节点的目的。

四、点击label标签直接选中

单选的情况下，要选中需要点击radio按钮，非常不方便，需要设置成点击标签页直接选中

用css就可以解决，原理是：把单选框的范围放大到整个标签范围，点击标签相当于点单选框。

附：

记录一下解决过程中对 el-cascader 组件的认识：

<el-cascaderref="editCascader"v-model="departmentIdList":props="propsSearch"placeholder="请选择业务部门"style="width: 15vw"></el-cascader>

加入ref，可以使用

this.$refs.editCascader.panel

获取到 el-cascader 对象

可以使用

this.$refs.editCascader.panel.lazyLoad(cqbankNode);