170 lines
3.6 KiB
Vue
170 lines
3.6 KiB
Vue
<template>
|
|
<div class="tree">
|
|
<el-tree
|
|
ref="tree"
|
|
node-key="id"
|
|
class="tree-line"
|
|
icon-class="icon-tree"
|
|
:indent="0"
|
|
:props="props"
|
|
:data="treeList"
|
|
:default-expanded-keys="['1']"
|
|
highlight-current
|
|
:current-node-key="currentKey"
|
|
:filter-node-method="filterNode"
|
|
@node-click="handleNodeClick">
|
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
|
<span :class="data.children.length !== 0 ? 'is-show' : 'is-leaf-none'"></span>
|
|
<span style="font-size:18px"> {{ node.label }} </span>
|
|
</span>
|
|
</el-tree>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "folderTree",
|
|
data () {
|
|
return {
|
|
treeList: [],
|
|
props: {
|
|
label: 'name',
|
|
children: 'children'
|
|
},
|
|
currentKey: ''
|
|
}
|
|
},
|
|
created () {
|
|
this.getTreeData()
|
|
},
|
|
methods: {
|
|
getTreeData () {
|
|
this.$http._getData('fileMaterialCenter/zlTree').then(res => {
|
|
if (res.ok && res.data) {
|
|
this.treeList = res.data
|
|
}
|
|
})
|
|
},
|
|
filterNode (value, data) {
|
|
if (!value) return true;
|
|
return data.name.indexOf(value) !== -1;
|
|
},
|
|
handleNodeClick (data, node, element) {
|
|
this.$emit('checked', data)
|
|
},
|
|
setCurrentKey (id) {
|
|
this.currentKey = id
|
|
this.$nextTick(()=>{
|
|
this.$refs.tree.setCurrentKey(this.currentKey)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.tree-line {
|
|
|
|
/deep/ .el-tree-node {
|
|
position: relative;
|
|
padding-left: 0px; // 缩进量
|
|
line-height: 30px;
|
|
}
|
|
|
|
/deep/ .el-tree-node__children {
|
|
padding-left: 16px; // 缩进量
|
|
overflow: inherit; // 横向滚动条默认hidden
|
|
}
|
|
.el-tree-node__content{
|
|
//display: block!important;
|
|
}
|
|
|
|
// 竖线
|
|
/deep/ .el-tree-node::before {
|
|
content: "";
|
|
height: 100%;
|
|
width: 1px;
|
|
position: absolute;
|
|
//left: -3px;
|
|
//top: -26px;
|
|
left: -1px;
|
|
top: -5px;
|
|
border-width: 1px;
|
|
border-left: 1px dashed #858990e0;
|
|
}
|
|
|
|
// 当前层最后一个节点的竖线高度固定
|
|
/deep/ .el-tree-node:last-child::before {
|
|
//height: 38px; // 可以自己调节到合适数值
|
|
height: 17px; // 可以自己调节到合适数值
|
|
}
|
|
|
|
// 横线
|
|
/deep/ .el-tree-node::after {
|
|
content: "";
|
|
width: 11px;
|
|
height: 20px;
|
|
position: absolute;
|
|
//left: -3px;
|
|
left: -1px;
|
|
top: 12px;
|
|
border-width: 1px;
|
|
border-top: 1px dashed #858990e0;
|
|
}
|
|
|
|
// 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
|
|
/deep/ & > .el-tree-node::after {
|
|
border-top: none;
|
|
}
|
|
|
|
/deep/ & > .el-tree-node::before {
|
|
border-left: none;
|
|
}
|
|
|
|
// 展开关闭的icon
|
|
/deep/ .el-tree-node__expand-icon {
|
|
font-size: 20px;
|
|
// 叶子节点（无子节点）
|
|
&.is-leaf {
|
|
color: transparent;
|
|
//display: none; // 也可以去掉
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/ .icon-tree {
|
|
margin: 0 5px 0 10px;
|
|
position: relative;
|
|
background: url('~@/assets/images/shangqi/img/tree-add.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
/deep/ .is-leaf {
|
|
background-image: none;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
/deep/ .expanded {
|
|
background: url('~@/assets/images/shangqi/img/tree-sub.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
/deep/ .is-leaf-none {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 15px;
|
|
height: 15px;
|
|
background: url('~@/assets/images/shangqi/img/none-file-new.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
/deep/ .is-show {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 15px;
|
|
height: 15px;
|
|
background: url('~@/assets/images/shangqi/img/tree.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
</style>
|