VUE element-ui 组件 el-tree 默认选中渲染问题

VUE element-ui 组件 el-tree 默认选中渲染问题在使用elementui中的el-tree时，发现对:default-checked-keys="this.arr"绑定的数组进行重新赋值并不能改变树形结构中的默认选中的值，反而还在原来基础上增加了重新赋值的选中。原以为是数组赋值等的引用或指向问题，但是使用console.log发现每次的this.arr的值都是变了的。于是便考虑

sing__star

2862人浏览 · 2021-08-14 11:55:58

sing__star · 2021-08-14 11:55:58 发布

VUE element-ui 组件 el-tree 默认选中渲染问题

在使用elementui中的el-tree时，发现对:default-checked-keys="this.arr"绑定的数组进行重新赋值并不能改变树形结构中的默认选中的值，反而还在原来基础上增加了重新赋值的选中。原以为是数组赋值等的引用或指向问题，但是使用console.log发现每次的this.arr的值都是变了的。于是便考虑到了el-tree本身的渲染是否存在问题。
查了相关资料发现：除 element el-tree 已选中的选项，光是清除 default-checked-keys 值是没用的。element 的 el-tree 组件是采用赋值的方式改变是否勾选的，所以你应该使用组件中提供的 this.$refs.tree.setCheckedKeys([]);

// 直接在你关闭窗口的事件中增加这段代码即可清楚选中的数据
 this.$refs.tree.setCheckedKeys([])

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^