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

公司业务要求不同根节点配置显示与否复选框,官方文档没有这样的配置,所以想到了修改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

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

时间: 2024-10-04 08:03:34

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

js 设置多个复选框选中和取消选中

// 设置选中 function setCheckboxClick(obj) { if(obj == null) { $.messager.alert('警告', "请选择要设置选中的项!",'warning'); } // alert(obj.value); var authorityId = obj.value; $.ajax({ type: 'post', url: 'getAuthorityByAuthorityId.action', data: {"authorit

DOM(十)使用DOM设置单选按钮、复选框、下拉菜单

1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为ture时,其它的都变为false. 先贴沙漠化一个例子: <script type="text/javascript"> function getChoice() { var oForm = document.forms["uForm1"]; var aCh

Qt树形控件QTreeView使用1——节点的添加删除操作 复选框的设置

QtreeView是ui中最常用的控件,Qt中QTreeWidget比QTreeView更简单,但没有QTreeView那么灵活(QTreeWidget封装的和MFC的CTreeCtrl很类似,没有mvc的特点). 1. QStandardItemModel在QTreeView中的使用 使用QTreeView的对应模型是QStandardItemModel,这个是Qt对应ui界面最有用的模型,它可以用于树形控件.列表控件.表格控件等等和条目有关的控件.QStandardItemModel用于列表

如何将checkbox复选框设置为只读

如何将checkbox复选框设置为只读:复选框checkbox并没有readOnly属性,但是如果将其设置为不可用也就是将它的disabled="disabled",checkbox值不会被发送,并且外观呈现灰色,下面就介绍一下如何模拟实现复选框的只读状态.一.原生javascript代码: ckObj.onclick=function(){ return false; } 也就是使用return false取消动作的默认行为,当点击复选框的时候,默认行为就是选中或者取消选中.二.jQ

关于textjs的tree带复选框的树

通过查阅一些资料和自己之前了解到的一些相关知识,有时项目中需要用到.话不多说,先看一下效果图: 我写的这人员选择的树,主要是改写了TreePanel,如下代码: ExtendTreePanel.js (该文件中可以写一些触发事件) Ext.namespace('Ext.ysq');//Ext.namespace方法定义一个管理类的包,类似Java中定义的包名,目的是建立自己的一个对象名,方便管理,防止重复 Ext.ysq.ExtendTreePanel = Ext.extend(Ext.tree

dojo中创建包含节点复选框的树形(CheckBoxTree)

树形结构是界面设计程中常见的部件,在代码实现时有很多方法,但由于设计到节点的父子关系和dom节点操作,实现起来比较复杂.dojo中提供了带复选框的树形部件CheckBoxTree,使用时只需创建对应的实例即可轻松实现此功能. 部件对应的html文件代码如下: <div> <div dojoType="dijit.Dialog" dojoAttachPoint="testList" title="${title}" style=&

设置复选框的只读效果,并且可通过表单提交

在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的"而不想让用户在此处勾选(比如在信息展示页面),这时候就需要将复选框设置成只读的效果. 提到只读,很容易想到使用readonly属性,但是对于复选框来说,这个属性和期望得到的效果是有差别的.原因在于readonly属性关联的是页面元素的value属性(例如textbox,设置了readonly就不能修改输入框的文本内容),而复选框的勾选/

转 纯CSS设置Checkbox复选框控件的样式

Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框. 在本教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它. css-style-checkboxes 查看演示,可以看到我们将要创建的复选框样式. 演示地址 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要添加一

【转】纯CSS设置Checkbox复选框控件的样式

Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框. 在本教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它. css-style-checkboxes 查看演示,可以看到我们将要创建的复选框样式. 演示地址 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要添加一