后台管理系统是从layui过来的，所以总是觉得elementUI的tree组件线条没了不好看，
第一中效果有线条
image.png
html
要在tree组件的直系父集上面加class名字tree-container，在自己加tree的class
<div class="tree-container">
<el-tree
ref="tree"
class="tree filter-tree"
:data="data"
:props="defaultProps"
:filter-node-method="filterNode"
default-expand-all
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span :dataType="data.type">
{{ node.label }}
</span>
</span>
</el-tree>
</div>
css样式
/* 树形结构节点添加连线 */
.tree .el-tree-node {
position: relative;
// padding-left: 16px;
}
.tree .el-tree-node__children {
padding-left: 16px;
}
.tree .el-tree-node :last-child:before {
height: 38px;
}
.tree .el-tree > .el-tree-node:before {
border-left: none;
}
.tree-container .el-tree > .el-tree-node:after {
border-top: none;
}
.tree .el-tree-node__children .el-tree-node:before {
content: '';
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.tree .el-tree-node:after {
content: '';
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.tree .el-tree-node__expand-icon.is-leaf {
display: none;
}
.tree .el-tree-node:before {
border-left: 1px dashed #dddddd;
bottom: 0px;
height: 100%;
top: -26px;
width: 1px;
}
.tree .el-tree-node:after {
border-top: 1px dashed #dddddd;
height: 20px;
top: 12px;
width: 24px;
}
.tree .custom-tree-node {
padding-left: 10px;
}
第二种效果二级加图标，且不一样的图标
image.png
<template>
<!-- 超级终端 添加终端 选择所属用户 -->
<el-dialog
v-el-drag-dialog
title="选择用户"
:visible.sync="dialogGroupVisible"
append-to-body
>
<el-tree
ref="tree"
:data="data"
show-checkbox
node-key="id"
:props="defaultProps"
:default-checked-keys="checks"
@node-expand="handleNodeClick"
@node-collapse="handleNodeClose"
@check-change="handleCheckChange"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span :dataType="data.type">
<i class="iconfont" :class="[data.icon, 'tree-icon']" />
{{ node.label }}
</span>
</span>
</el-tree>
<div slot="footer" class="dialog-footer">
<el-button
type="primary"
@click="dialogGroupVisibleClose()"
>确 定</el-button>
<el-button @click="dialogGroupVisible = false">关 闭</el-button>
</div>
</el-dialog>
</template>
<script>
import { getAllUser, getGroupInfo } from '@/services/API'
export default {
name: 'UserGroupDigUser',
data() {
return {
dialogGroupVisible: false,
// data: [],
defaultProps: {
children: 'children',
label: 'label'
},
// 获取选中的数据
newArr: [],
newArrName: [],
data: [
// {
// id: 1,
// label: "一级 1",
// icon: "iconwenjianjiaguanbi",
// children: [
// {
// id: 4,
// label: "二级 1-1",
// icon: "iconwenjian",
// },
// ],
// },
],
checks: []
}
},
created() {
this.getGoupListData()
},
methods: {
handleNodeClick(data) {
data.icon = 'iconwenjianjia-dakai'
},
handleNodeClose(data) {
data.icon = 'iconwenjianjiaguanbi'
},
changeDialog(data) {
this.checks = data
this.dialogGroupVisible = true
},
getGoupListData() {
getGroupInfo()
.then(res => {
// console.log(JSON.stringify(res))
if (res.data.code === 0) {
// this.data=res.data.data;
for (var i = 0; i < res.data.data.length; i++) {
this.data.push({
id: res.data.data[i].id,
label: res.data.data[i].name,
icon: 'iconwenjianjiaguanbi',
children: []
})
}
this.getAllUserData()
}
})
.catch(() => {
this.$message.error('数据获取失败')
})
},
getAllUserData() {
getAllUser()
.then(res => {
if (res.data.code === 0) {
for (var i = 0; i < res.data.data.length; i++) {
for (var j = 0; j < res.data.data[i].groups.length; j++) {
this.data.forEach((item, index) => {
// eslint-disable-next-line eqeqeq
if (res.data.data[i].groups[j] == item.id) {
item.children.push({
id: res.data.data[i].id,
label: res.data.data[i].cnname,
icon: 'iconwenjian'
})
}
})
}
}
}
})
.catch(() => {
this.$message.error('数据获取失败')
})
},
handleCheckChange(data, node, datas) {
// console.log(JSON.stringify(data))
// console.log(node)
},
// 数组去重
unique(arr) {
const newArr = []
const len = arr.length
for (let i = 0; i < len; i++) {
// eslint-disable-next-line eqeqeq
if (newArr.indexOf(arr[i]) == -1) {
newArr.push(arr[i])
}
}
return newArr
},
dialogGroupVisibleClose() {
// 获取了所有选中的数据节点
const res = this.$refs.tree.getCheckedNodes()
var arr = []
res.forEach(item => {
if (item.children) {
item.children.forEach(items => {
arr.push(items)
})
}
})
this.dialogGroupVisible = false
var belong_userName = ''
var belong_user = []
arr.forEach(item => {
belong_userName += item.label + '\t\n'
belong_user.push(item.id)
})
var data = {
belong_userName: belong_userName,
belong_user: belong_user
}
// if (belong_user.length !== 0) {
// }
this.$emit('to-parent', data)
}
}
}
</script>
<style lang="scss">
.iconfont.iconwenjian {
color: #b58e17;
}
.iconfont.iconwenjianjia-dakai {
color: #a0b015;
}
.iconfont.iconwenjianjiaguanbi {
color: #a0b015;
}
.el-dialog__header {
border-bottom: 1px solid #e2e2e2;
background-color: #f8f8f8;
}
</style>
网友评论