关于element-ui中el-tree默认选择节点视图不更新问题的解决方案。

QGQi

已于 2023-07-10 10:58:52 修改

阅读量3.3k

点赞数 2

分类专栏： Vue Element-ui 文章标签： vue.js elementui

于 2023-05-16 19:20:01 首次发布

本文链接：https://blog.csdn.net/weixin_43362779/article/details/130711946

版权

Vue 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

Element-ui

1 篇文章 0 订阅

订阅专栏

在Vue2.0和Element-UI环境下，遇到el-tree组件checkedKey更新但视图不变的问题。由于Vue无法检测数组变化，通过创建新的数组checkedKeys和checkedKey来间接更新视图。在每次接口响应后，清空checkedKeys，然后设置新的值，利用$nextTick和setTimeout确保视图更新。

摘要由CSDN通过智能技术生成

1、问题描述：

在使用element-ui和Vue2.0的时候出现了以下问题：

<el-tree
    ref="tree"
    :data="ModuleLimit"
    show-checkbox
    node-key="id"
    :default-checked-keys="checkedKey"
    :props="defaultProps"
>
</el-tree>

上述代码为el-tree的代码，我将el-tree放在了el-dialog中，当我点击不同的el-button时，调用不同的接口，得到不同的checkedKey，checkedKey更新了，但是视图没有改变。

2、问题原因

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。

3、解决方案

可能的原因：

（1）未正确绑定 checkedKey：检查你的 el-tree 组件是否正确绑定了 :default-checked-keys 属性，并且指向了 checkedKey 变量。确保你使用的是正确的语法，例如 :default-checked-keys="checkedKey"

（2）checkedKey 变量的值没有实际变化：确保你对 checkedKey 变量进行了真正的更新。

排除以上问题后，我采用了以下方法来解决：

（1）新建一个数组

data() {
    return {
        checkedKeys: [],
        checkedKey: [],
    }
}

其中checkedKeys存放调用接口得到的值，checkedKey存放处理之后的值。

（2）使用

this.$nextTick(() => {

this.$refs.tree.setCheckedKeys([]);

});// 清空选择的节点

// 点击按钮调用方法
showSelectedModuleLimit(row) {
// 清空checkedKeys
      this.checkedKeys.splice(0, this.checkedKeys.length)
      if(this.checkedKey.length == 0) {
        console.log('初始化');
      }else{
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys([]);
      });
      }
      setTimeout(() => {
        this.centerDialogVisible = true;
      }, 0);
      this.$axios
        .post(this.$httpUrl + "/user/getModuleLimitById?id=" + row.id)
        .then((res) => res.data)
        .then((res) => {
          if (res.code == 200) {
             // 调用接口得到的checkedKeys
               this.checkedKeys = [
                ...this.checkedKeys,
                res.data.....//这边存放你需要的值（数组）
         ];
            this.checkedKey = [...this.checkedKeys];
            this.checkedKey = this.checkedKeys.slice();
            this.total = res.total;
          } else {
            alert("获取数据失败");
          }
        });
    },