vue3项目element-plus树组件el-tree增加引导线

因为element的样式不满足当前的的需求UI图所以对el-tree进行增加了引导线

修改样式如下增加引导线并且实现增删输入框

1、在vue3中组件里面template模板引入el-tree组件需要设置:indent“0”不然每层树padding-left呈18px的倍数增加

div

classmytreeel-tree:indent0:datadata:propsdefaultProps:expand-on-click-nodefalse:highlight-currentfalsenode-keyidnode-clickhandleNodeClick:default-expanded-keysexpDtable/el-tree

/divindet设置每层叔padding-left为0data绑定的展示数据props配置选项里面配置节点子节点字段等默认绑定子节点childrenelement-plus里面有详细的解说[Tree

树形控件

Plus]expand-on-click-node是否在点击节点的时候展开或者收缩节点

默认值为

false则只有点箭头图标的时候才会展开或者收缩节点。

node-key每个树节点用来作为唯一标识的属性整棵树应该是唯一的node-click当节点被点击的时候触发default-expanded-keys默认展开节点

2.在setup中声明变量datadefaultPropshandleNodeClickexpDtable

import

}3.在el-tree里面写入输入框已经增删接着上面模板的代码

我们往里面继续写

el-tree:indent0:datadata:propsdefaultProps:expand-on-click-nodefalse:highlight-currentfalsenode-keyidnode-clickhandleNodeClick:default-expanded-keysexpDtabletemplate

#default{

10pxel-inputv-modeldata.describeplaceholder请输入用户变量用途typenumber:disableddata.id

1//divdiv

clickchildAdd(node,data)/span/divdiv

stylewidth:

data)-/span/div/div/template/el-tree4.在setup里面加上我们的新增方法删除方法以及选择框绑定的数据

import

datas.id);children.splice(index,

}const

将这个浮点数放大到100000010^6的范围内并四舍五入到最近的整数let

randomInt

检查生成的数是否小于100000六位数的最小值如果是则加上100000//

(randomInt

[value.id]value.children.push({name:

,type:

getRandomSixDigitNumber(),children:

[]})data.value

}5.最后就是css主要代码实现在css部分该项目使用scssdeep深度选择器使用如下方式css代码如下

style

.el-tree-node:focus.el-tree-node__content

{background-color:

.el-tree-node.is-current.el-tree-node__content

{background:

.el-tree-node__expand-icon.expanded

{//

.el-tree-node__expand-icon.expanded.el-icon-caret-right:before

{content:

-8px;}.el-tree-node__expand-icon.is-leaf:before

{content:

classtable-header/div/divdivdiv

div

classmytreeel-tree:indent0:datadata:propsdefaultProps:expand-on-click-nodefalse:highlight-currentfalsenode-keyidnode-clickhandleNodeClick:default-expanded-keysexpDtabletemplate

#default{

10pxel-inputv-modeldata.describeplaceholder请输入用户变量用途typenumber:disableddata.id

1//divdiv

clickchildAdd(node,data)/span/divdiv

stylewidth:

data)-/span/div/div/template/el-tree/div/div/div/divdiv

classbuttonel-buttonv-forbutton

buttonsclickaddUser():keybutton.text:typebutton.typetextbgstylemargin-top:

30px{{

datas.id);children.splice(index,

1)//

将这个浮点数放大到100000010^6的范围内并四舍五入到最近的整数let

randomInt

检查生成的数是否小于100000六位数的最小值如果是则加上100000//

(randomInt

[value.id]value.children.push({name:

,type:

getRandomSixDigitNumber(),children:

[]})data.value

.el-tree-node:focus.el-tree-node__content

{background-color:

.el-tree-node.is-current.el-tree-node__content

{background:

.el-tree-node__expand-icon.expanded

{//

.el-tree-node__expand-icon.expanded.el-icon-caret-right:before

{content:

-8px;}.el-tree-node__expand-icon.is-leaf:before

{content: