码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-10-24 15:15:10      阅读:656      评论:0      收藏:0      [点我收藏+]

标签:box   mode   节点   根据   文章   hidden   img   方式   自己的   

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

1.这里将“node_modules\element-ui\packages”下的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

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

标签:box   mode   节点   根据   文章   hidden   img   方式   自己的   

原文地址:https://www.cnblogs.com/js123/p/11732180.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!