element-ui tree 根据不同叶子节点设置是否显示复选框

Posted 2021-03-25 js123

公司业务要求不同根节点配置显示与否复选框，官方文档没有这样的配置，所以想到了修改element-ui源码。

1.这里将“node_moduleselement-uipackages”下的tree文件夹整体复制到自己的项目目录（customComponent）中

2.修改tree.vue

      <el-checkbox
        v-if="showCheckbox"
        :style="{ ‘visibility‘: node.data.leaf?‘hidden‘:‘visible‘ }"
        v-model="node.checked"
        :indeterminate="node.indeterminate"
        :disabled="!!node.disabled"
        @click.native.stop
        @change="handleCheckChange"
      >
      </el-checkbox>
　　　<!-- 上面第三行是我添加的，node.data.leaf是后台传过来的标识，用来判断是否显示复选框，大家根据自己的树数据进行更换 -->

3.在使用到tree组件的文件中引入tree.vue,并且声明一下就可以使用了，跟使用<el-tree>的方式一样。

参考文章：https://www.jianshu.com/p/5290ef00829f