Tree
// 基础布局
<div class="treeStyle" style="height:100%">
<el-tree
ref="tree"
default-expand-all
highlight-current
:data="treeData"
node-key="id"
:props="defaultProps"
style="height:99%">
</el-tree>
</div>
data() {
return {
treeData: [],
// 设置props
defaultProps: {
// 你接口返回的字节点名称
children: "children",
// 名称
label: "label"
},
}
}
// 获取tree数据 方法可在生命周期函数中执行
loadTreeData() {
let data = {
deta: '数据'};
this.axios.post('接口地址', this.$qs.stringify(data)).then(res => {
this.treeData = res.data;
});
if (this.treeData.length > 0) {
this.$nextTick(() => {
// 通过 keys 设置默认勾选的节点,使用此方法必须设置 node-key属性,若没有节点被选中则返回 null
this.$refs.tree.setCurrentKey(this.treeData[0].id);
this.mainPrjName = this.treeData[0].text
})
}
},
换肤代码
<style lang="less" scoped>
// .treeStyle 就是tree父级class
/deep/ .treeStyle{
.el-tree > .el-tree-node > .el-tree-node__content:first-child {
&::before,
&::after {
border: none;
}
}
.el-tree {
border: 1px solid #e6e6e6 !important;
}
.el-tree-node__content {
border-bottom: 1px solid #e6e6e6;
border-left: 1px solid #e6e6e6;
}
.el-tree-node .el-tree-node__content .el-tree-node__label {
overflow: hidden;
text-overflow: ellipsis;
}
.el-tree-node .el-tree-node__content {
height: 30px;
&::before,
&::after {
content: '';
position: absolute;
right: auto;
}
&::before {
border-left: 2px solid #e6e6e6;
bottom: 50px;
height: 100%;
top: 0;
width: 1px;
margin-left: -5px;
margin-top: -15px;
}
&::after {
border-top: 2px solid #e6e6e6;
height: 20px;
top: 14px;
width: 10px;
margin-left: -5px;
}
}
.el-tree .el-tree-node {
position: relative;
}
}
</style>