el-tree中在methods中更新数组,html代码中取不到数组中该下标的值。

比如,我需要通过一个点击事件使该叶子包含的数据隐藏或者是显示,一般通过数组[index]来实现,但是最开始是不知道数组长度的,这就需要在点击的时候给数组赋值,然后即时更新该数组下标的值,控制它的隐藏或显示。

实现效果:

el-tree中在methods中更新数组,html代码中取不到数组中该下标的值。

el-tree中在methods中更新数组,html代码中取不到数组中该下标的值。

需要实现在点击自己的叶子时,控制该叶子下的数据改变,其他叶子数据不变,不能影响到其他的叶子。所以需要使用数组,唯一下标。

实现代码:

1.html

<span class="custom-tree-node" slot-scope="{ node, data }">
  <div class="word_style">
    <span>{{ node.label }}</span>
    <img src="../../assets/images2/more.png" @click="clickOperationButt(node,data)">
  </div>
  <div class="operation_style" v-show="showOperationTo[data.id]">
    <p @click="directorySet" :class="{‘active‘: cur == 1}">目录设置</p>
    <p @click="newSubdirectory" :class="{‘active‘: cur == 2}">新增子目录</p>
    <p @click="whitelistModify" :class="{‘active‘: cur == 3}">修改白名单</p>
    <p @click="LibTableLinkManage" :class="{‘active‘: cur == 4}">库表链接管理</p>
    <p @click="deleted" :class="{‘active‘: cur == 5}">删除</p>
  </div>
</span>

2.js

showOperationTo: [],

clickOperationButt(node,data){
  this.showOperationTo[data.id] = !this.showOperationTo[data.id];
  this.$set(this.showOperationTo, data.id, this.showOperationTo[data.id]);
},

注意:

1.我开始是想的使用this.$forceUpdate();来实现强制更新,数组数据都已经变了,但html代码上就是获取不到,不管用,后来百度发现用set给他赋值,就可以实现动态改变html上的数据显示了。

相关推荐