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

1、问题描述：

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

上述代码为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("获取数据失败");
          }
        });
    },