UI今天给了一张图，需要树形控件通过自定义节点内容实现。需要显示父节点，不显示子节点，点击父节点拿到子节点的数据，显示在表格中。如下图，就长这样。
实现
定义节点
<template>
<div id="operatePush" class="operate_push">
<el-tree
:data="treeData"
node-key="id"
default-expand-all
:expand-on-click-node="false"
:render-content="renderContentMedia"
@node-click="clickTreeNode"
></el-tree>
</div>
</template
<script>
export default {
name: "OperatePush",
data(){
return{
treeData: []
}
},
mounted() {
this.getFile();
},
methods: {
// 获取文件列表
getFile(){
this.treeData = [
{
id: '1',
label: '菜单1',
children: [
{
id: 4,
label: '菜单1-1'，
children: [
{
id: 9,
label: '音乐1'
},
{
id: 10,
label: '音乐2'
},
{
id: 50,
label: '音乐3'
}
]
},
{
id: 2,
label: '菜单2',
children: [
{
id: 5,
label: '音乐4'
},
{
id: 6,
label: '音乐5'
}
]
},
{
id: 3,
label: '菜单3',
children: [
{
id: 7,
label: '音乐6'
},
{
id: 8,
label: '音乐7'
}
]
}
]
}
]
},
// 树状列表自定义 - 媒体库
renderContentMedia(h, { node, data, store }) {
if(!data.children){
return (
<span class="custom-tree-node custom_hide">
<span class="custom_tree_music"></span>
<span class="custom_tree_content">{node.label}</span>
<span class="custom_tree_operate">
<i class="el-icon-plus" on-click={ () => this.append(data) }></i>
<i class="el-icon-edit" on-click={ () => this.edit(data) }></i>
<i class="el-icon-delete" on-click={ () => this.remove(node, data) }></i>
</span>
</span
);
}
return (
<span class="custom-tree-node">
<span class="custom_tree_folder"></span>
<span class="custom_tree_content">{node.label}</span>
<span class="custom_tree_operate">
<i class="el-icon-plus" on-click={ () => this.append(data) }></i>
<i class="el-icon-edit" on-click={ () => this.edit(data) }></i>
<i class="el-icon-delete" on-click={ () => this.remove(node, data) }></i>
</span>
</span>
);
},
}
}
</script>这样自定义，图标显示出来了，样式也对上了，但是最后一个层级的还是没有隐藏，没有达到想要的效果。效果长这样。
在添加的dom结构上添加一个custom_hide样式，然后用js选取父节点添加display: none样式即可实现隐藏。
完整代码：
<template>
<div id="operatePush" class="operate_push">
<el-tree
:data="treeData"
node-key="id"
default-expand-all
:expand-on-click-node="false"
:render-content="renderContentMedia"
@node-click="clickTreeNode"
></el-tree>
</div>
</template
<script>
export default {
name: "OperatePush",
data(){
return{
treeData: []
}
},
mounted() {
this.getFile();
},
methods: {
// 获取文件列表
getFile(){
this.treeData = [
{
id: '1',
label: '菜单1',
children: [
{
id: 4,
label: '菜单1-1'，
children: [
{
id: 9,
label: '音乐1'
},
{
id: 10,
label: '音乐2'
},
{
id: 50,
label: '音乐3'
}
]
},
{
id: 2,
label: '菜单2',
children: [
{
id: 5,
label: '音乐4'
},
{
id: 6,
label: '音乐5'
}
]
},
{
id: 3,
label: '菜单3',
children: [
{
id: 7,
label: '音乐6'
},
{
id: 8,
label: '音乐7'
}
]
}
]
}
];
this.operateDom();
},
// 树状列表自定义 - 媒体库
renderContentMedia(h, { node, data, store }) {
if(!data.children){
return (
<span class="custom-tree-node custom_hide">
<span class="custom_tree_music"></span>
<span class="custom_tree_content">{node.label}</span>
<span class="custom_tree_operate">
<i class="el-icon-plus" on-click={ () => this.append(data) }></i>
<i class="el-icon-edit" on-click={ () => this.edit(data) }></i>
<i class="el-icon-delete" on-click={ () => this.remove(node, data) }></i>
</span>
</span
);
}
return (
<span class="custom-tree-node">
<span class="custom_tree_folder"></span>
<span class="custom_tree_content">{node.label}</span>
<span class="custom_tree_operate">
<i class="el-icon-plus" on-click={ () => this.append(data) }></i>
<i class="el-icon-edit" on-click={ () => this.edit(data) }></i>
<i class="el-icon-delete" on-click={ () => this.remove(node, data) }></i>
</span>
</span>
);
},
// 操作dom结构，将最后一个层级隐藏
operateDom(){
this.$nextTick(() => {
let dom = document.querySelectorAll('.custom_hide');
dom.forEach((item, i) => {
item.parentNode.parentNode.style.display = 'none';
});
})
}
}
}
</script>这样就实现了图一的效果。
起先想用只用css实现
1. 反向选择
.el-tree-node < .custom_hide{
display: none;
}2. parent
.custom_hide {
background: none;
}3. has
.el-tree-node:has(.custom_hide){
background: none;
}但是这些现在只是提案，浏览器还不支持。
另外，还有一个选取父元素的js方法也可以，这个我没有去实现，只提供一个思路：
document.body.classList.contains('custom_hide');下面是我的微信公众号，欢迎关注
