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>これにより、図1の効果が得られます。
最初はCSSだけを使いたかった
1.逆選択
.el-tree-node < .custom_hide{
display: none;
}2.親
.custom_hide {
background: none;
}3.持っている
.el-tree-node:has(.custom_hide){
background: none;
}しかし、これらは現在の提案に過ぎず、ブラウザーはまだそれらをサポートしていません。
さらに、親要素を選択するためのjsメソッドもありますが、これは実装していません。
document.body.classList.contains('custom_hide');以下は、私のWeChatパブリックアカウントです。
