效果图
实现效果主要基于vue与element-ui中的el-tree组件,更换了el-tree的固定图标样式，显示了层级线条，并增加了自定义按钮区
- 这里我们要用到字体图标，所以我们从iconfont阿里图标库直接引入
- 找到需要的图标，添加进项目
- 找到图标所在的项目，点击查看链接
- 复制地址，或者点击地址复制跳转后地址链接
可以在main.js全局引入iconfont图标库
- 画出基本页面结构
<div class='tree_form_left_input'>
<el-input placeholder="请输入" v-if="searchFlg" v-model='filterText' suffix-icon="el-icon-search" clearable=""></el-input>
</div>
<el-tree :data='treeModelData' :show-checkbox="imultiple" class='tree_form_left_tree' highlight-current>
<div class='custom-tree-node_body' slot-scope="{ node, data }">
<span class="custom-tree-node">
<!-- 判断是否存在子级数据 -->
<i v-if="data.children.length<=0" class="font_family icon-circular no_children"/>
<!-- 节点展开样式 -->
<i v-else-if="node.expanded" class="file_class font_family icon-file_open"/>
<!-- 节点收缩样式 -->
<i v-else class="file_class font_family icon-file_close"/>
<!-- 节点内容 -->
<span class='label' :title='node.label || "-"'>{{node.label}}</span>
</span>
<!-- 自定义按钮区 -->
<span v-if='isForm && data.children.length<=0' class='tree_form_left_tree_icon'>
<i class="el-icon-edit" @click='treeEdit(node,data)'></i>
<i class="el-icon-circle-plus-outline" @click='treeAdd(node,data)'></i>
<i class="el-icon-delete" @click='treeEdit(node,data)'></i>
</span>
</div>
</el-tree>
- 编写css基本样式，使用的是less样式语言
<style lang="less">
.tree_form_left_input{
.el-input{
.el-input__inner{
height:32px;
font-size:14px;
}
}
}
.tree_form_left_tree{
margin-top:10px;
.el-tree-node {
position: relative;
color: black;
padding: 3px 0px;
padding-left: 10px; // 缩进量
}
.el-tree-node__children {
padding-left: 16px; // 缩进量
}
// 竖线
.el-tree-node::before {
content: "";
height: 100%;
width: 1px;
position: absolute;
left: -3px;
top: -20px;
border-width: 1px;
border-left: 1px dashed #88909c;
}
// 当前层最后一个节点的竖线高度固定
.el-tree-node:last-child::before {
height: 38px; // 可以自己调节到合适数值
}
// 横线
.el-tree-node::after {
content: "";
width: 24px;
height: 20px;
position: absolute;
left: -3px;
top: 19px;
border-width: 1px;
border-top: 1px dashed #88909c;
}
// 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
& > .el-tree-node::after {
border-top: none;
}
& > .el-tree-node::before {
border-left: none;
}
.el-tree-node.is-current>.el-tree-node__content{
.custom-tree-node_body,.tree_form_left_tree_icon,.custom-tree-node .no_children{
color:#006eff !important;
}
}
.el-tree-node__content{
padding-left:0 !important;
color:#444;
// 树缩进样式
.el-icon-caret-right::before{
content: "";
width:14px;
height:14px;
background: url('~assets/plus.png');
background-size: 100% 100%;
border-radius: 3px;
display: inline-block;
}
.el-tree-node__expand-icon.expanded{
transform: rotate(0);
}
// 树展开样式
.el-tree-node__expand-icon.expanded::before{
content: "";
width:14px;
height:14px;
background: url('~assets/reduce.png');
background-size: 100% 100%;
border-radius: 3px;
display: inline-block;
}
.el-tree-node__expand-icon.is-leaf::before{
content: "";
}
.el-icon-caret-right.is-leaf::before{
content: "";
display: none;
}
.custom-tree-node .file_class{
color: #ffb400;
}
.custom-tree-node .label{
margin-left:5px;
}
.custom-tree-node .no_children{
color: #aaa;
}
}
// 使用flex布局对custom-tree-node_body盒子进行排版
.custom-tree-node_body{
width:100%;
display: flex;
justify-content: space-between;
// margin-top:-3px;
}
.tree_form_left_tree_icon{
padding:0 3px;
font-size:16px;
color:#666;
i{
margin:0 4px;
}
}
.tree_form_left_tree_icon:hover{
cursor: pointer;
}
}
</style>
- 主要使用的props接收数据，并将点击事件传递出去
<script>
export default {
name: 'TreeForm',
data () {
return {
filterText: '', // 搜索框对应的value值
treeModelData: '', // 树的展示数据
defaultProps: {
children: 'children',
label: 'label'
}
}
},
props: {
treeData: { // 接收树数据
type: Array,
default: () => {
return []
}
},
btns: { // 可用于自定义按钮数据展示
type: Array,
default: () => {
return []
}
},
searchFlg: { // 是否显示搜索框
type: Boolean,
default: true
},
imultiple: { // 是否显示多选框
type: Boolean,
default: false
},
maxHeight: {
type: Number,
default: 1080
},
isForm: { // 是否需要显示按钮区
type: Boolean,
default: false
}
},
watch: {
treeData: { // 接收到的数据进行处理
handler (val) {
if (val) {
this.treeModelData = JSON.parse(JSON.stringify(val))
}
},
deep: true,
immediate: true
}
},
methods: { // 事件处理
treeEdit (node, data) {
this.$emit('treeEdit', node, data) // 将需要执行的数据传递出去
},
treeAdd (node, data) {
this.$emit('treeAdd', node, data)
},
treeDelete (node, data) {
this.$emit('treeDelete', node, data)
}
}
}
</script>
- 引用方式
<template>
<div class='p-t-10'>
<tree-column :treeData='treeData' :isForm='true' class='tree_left'></tree-column>
</div>
</template>
<script>
import TreeColumn from '../form/tree.vue'
export default {
name: 'TreeEditTable',
data () {
return {
btns: [
{
icon: 'el-icon-edit',
label: '',
value: 'edit',
id: '1'
},
{
icon: 'el-icon-circle-plus-outline',
label: '',
value: 'add',
id: '2'
},
{
icon: 'el-icon-delete',
label: '',
value: 'delete',
id: '3'
}
],
treeData: [
{
id: '1',
label: '部门',
code: '100001',
children: [
{
id: '11',
label: '管事会',
code: '1000011',
children: [
{
id: '1',
label: '部门',
code: '100001',
children: [
{
id: '11',
label: '管事会',
code: '1000011',
children: [
]
}, {
id: '11',
label: '管事会',
code: '1000011',
children: [
]
}, {
id: '11',
label: '管事会',
code: '1000011',
children: [
]
}
]
}, {
id: '1',
label: '部门',
code: '100001',
children: [
{
id: '11',
label: '管事会',
code: '1000011',
children: [
]
}, {
id: '11',
label: '管事会',
code: '1000011',
children: [
]
}, {
id: '11',
label: '管事会',
code: '1000011',
children: [
]
}
]
}, {
id: '1',
label: '部门',
code: '100001',
children: [
{
id: '11',
label: '管事会',
code: '1000011',
children: [
]
}, {
id: '11',
label: '管事会',
code: '1000011',
children: [
]
}, {
id: '11',
label: '管事会',
code: '1000011',
children: [
]
}
]
}
]
}
]
}, {
id: '1',
label: '部门',
code: '100001',
children: [
{
id: '11',
label: '管事会',
code: '1000011',
children: [
]
}
]
}, {
id: '1',
label: '部门',
code: '100001',
children: [
{
id: '11',
label: '管事会',
code: '1000011',
children: [
{
id: '1',
label: '部门',
code: '100001',
children: [
{
id: '11',
label: '管事会',
code: '1000011',
children: [
]
}, {
id: '11',
label: '管事会',
code: '1000011',
children: [
]
}, {
id: '11',
label: '管事会',
code: '1000011',
children: [
]
}
]
}, {
id: '1',
label: '部门',
code: '100001',
children: [
{
id: '11',
label: '管事会',
code: '1000011',
children: [
]
}, {
id: '11',
label: '管事会',
code: '1000011',
children: [
]
}, {
id: '11',
label: '管事会',
code: '1000011',
children: [
]
}
]
}, {
id: '1',
label: '部门',
code: '100001',
children: [
{
id: '11',
label: '管事会',
code: '1000011',
children: [
]
}, {
id: '11',
label: '管事会',
code: '1000011',
children: [
]
}, {
id: '11',
label: '管事会',
code: '1000011',
children: [
]
}
]
}
]
}
]
}
]
}
},
components: {
TreeColumn
}
}
</script>
