The element-ui tree control hides certain specified nodes

The UI gave a picture today, and the tree control needs to be realized by customizing the content of the node. You need to display the parent node, but not the child node. Click the parent node to get the child node data, which is displayed in the table. As shown below, it looks like this.

achieve

Define Node

<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>

Customize like this, the icon is displayed, and the style is correct, but the last level is still not hidden, and the desired effect is not achieved. The effect looks like this.

Add a custom_hide style on the added dom structure, and then use js to select the parent node and add display: none style to achieve hiding.

Complete code:

<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>

This achieves the effect of Figure 1.

 

At first I wanted to use only css

1. Reverse selection

.el-tree-node < .custom_hide{
  display: none;
}

2. parent

.custom_hide {
 background: none;
}

3. has

.el-tree-node:has(.custom_hide){
  background: none;
}

But these are just proposals now, and the browser does not yet support them.

In addition, there is also a js method to select the parent element. I did not implement this, only provide an idea:

document.body.classList.contains('custom_hide');

The following is my WeChat public account, welcome to pay attention