element ui tree组件使用render函数自定义节点内容，隐藏或者显示(附带点击子节点双击事件)-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui tree组件使用render函数自定义节点内容，隐藏或者显示(附带点击子节点双击事件)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<el-tree
	ref="tree"
	class="stafftree"
	:data="devicesTreeData"
	:props="defaultProps"
	node-key="id"
	@node-click="handleNodeClick" 
	:render-content="renderContent"
	:default-checked-keys="checkedKeys"
  	:default-expanded-keys="defaultExpandedKeys"
  >
</el-tree>

handleNodeClick(item, node, self) {
  this.treeClickId = item.id;
  this.treeClickCnt++;
  // 注册清空点击次数计时器任务
  window.clearTimeout(this.treeClickTimeout);
  this.treeClickTimeout = window.setTimeout(() => {
    this.treeClickCnt = 0;
  }, 500);
  // 连续点击多次则不做任何事情
  if (this.treeClickCnt > 2) return;
  // 单击事件
  if (this.treeClickCnt == 1) {
  	// do something
  }
  // 双击事件
  if (this.treeClickCnt == 2 && item.data.dataType == "point") {
	// do something
  }
},
// render函数使用
// 下边的数据都是我获取的数据，要根据数据进行显示什么或者隐藏什么或者需要做什么操作
renderContent(h, { node, data }) {
 if (data.expand) {
   if (data.data.dataType == "point") {
     return h('span', { class: 'custom-node' }, [
       h('el-checkbox', {
         class: 'custom-checkbox',
         props: {
           value: this.checkedKeys.includes(data.id) // 根据选中的节点的id判断复选框是否选中
         },
         // on: {
         //   change: value => {
         //     console.log('val', value);
         //     if (value) {
         //       this.checkedKeys = [data.id]; // 更新选中的节点的id
         //     } 
         //     else {
         //       this.checkedKeys = []; // 清空选中的节点的id
         //       data.expand = false;
         //       this.selectName.presetName = '';
         //     }
         //   }
         // }
       }),
       h('span', { class: 'custom-label' }, data.label)
     ]);
   } else {
     h('span', { class: 'custom-label' }, data.label)
   }
 } else if (!data.expand) {
   if (data.data.dataType == "point") {
     return h('span', { class: 'custom-node' }, [
       data.data.checked ? h('i', { class: 'custom-icon el-icon-check' }) : h('i'),
       this.highlightCurrent == data.data.id ? h('span', { class: 'custom-label1' }, data.label) : h('span', { class: 'custom-label' }, data.label)
     ]);
   } else {
     return h('span', { class: 'custom-node' }, [
       // h('i', { class: 'custom-icon el-icon-check' }),
       h('span', { class: 'custom-label2' }, data.label)
     ]);
   }
 }
},

示例：

<template>
  <div>
    <!-- @check-change="checkChange"  -->
    <el-tree ref="tree" class="stafftree" :data="editCBRdata" :props="defaultProps" node-key="id"
      @node-click="handleNodeClick()" :render-content="renderContent">
    </el-tree>
    <div id="result">
    </div>
    <div>
    </div>
  </div>
</template>
   
<script>
export default {
  name: 'demotree',
  data() {
    return {
      editCBRdata: [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
              children: [
                {
                  label: '三级 1-1-1'
                }
              ]
            }
          ]
        },
        {
          label: '一级 2',
          children: [
            {
              label: '二级 2-1',
              children: [
                {
                  label: '三级 2-1-1'
                }
              ]
            },
            {
              label: '二级 2-2',
              children: [
                {
                  label: '三级 2-2-1'
                }
              ]
            }
          ]
        },
        {
          label: '一级 3',
          children: [
            {
              label: '二级 3-1',
              children: [
                {
                  label: '三级 3-1-1'
                }
              ]
            },
            {
              label: '二级 3-2',
              children: [
                {
                  label: '三级 3-2-1'
                }
              ]
            }
          ]
        },
        {
          label: '一级 4',
          children: [
            {
              label: '二级 4-1',
              children: [
                {
                  label: '三级 4-1-1',
                  children: [
                    {
                      label: '四级 4-1-1'
                    }
                  ]
                }
              ]
            },
            {
              label: '二级 4-2',
              children: [
                {
                  label: '三级 4-2-1',
                  children: [
                    {
                      label: '四级 4-1-1'
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          label: '一级 5',
          children: [
            {
              label: '二级 5-1',
              children: [
                {
                  label: '三级 5-1-1',
                  children: [
                    {
                      label: '四级 5-1-1',
                      children: [
                        {
                          label: '五级 5-1-1'
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              label: '二级 5-2',
              children: [
                {
                  label: '三级 5-2-1',
                  children: [
                    {
                      label: '四级 5-1-1',
                      children: [
                        {
                          label: '五级 5-1-1',
                          value: "checkbox"
                        }, {
                          label: '五级 5-2-1',
                          value: "checkmark"
                        }, {
                          label: '五级 5-3-1'
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      editCheckId: null,
      checkedKeys: [] // 用于存储选中的节点的id
    };
  },
  mounted() {
    this.nameHeader();
  },
  methods: {
    nameHeader() {
      let a = {name: 'age', age: '2'};
      let c = {...a };
      console.log('c', c);
      this.$nextTick(() => {
        var resultElement = document.getElementById("result");
        // console.log('resultElement', resultElement);
        let arr = [1, 2, 3];
        for (let index = 0; index <= arr.length; index++) {
          var numberSpan = document.createElement("div");
          // 将返回值设置为元素的文本内容
          numberSpan.textContent = arr[index];
          resultElement.appendChild(numberSpan);
          }
      })
    },
    handleNodeClick(item, node, self) {
      console.info(1)
      console.log(item, node, self);
      // event.stopPropagation();
      this.editCheckId = item.id;
      this.$refs.tree.setCheckedKeys([item.id]);
    },
    // checkChange(item, node, self) {
    //   alert(2)
    //   if (node) {
    //     this.editCheckId = item.id;
    //     this.checkedKeys = [item.id]; // 更新选中的节点的id
    //   } else {
    //     if (this.editCheckId === item.id) {
    //       this.checkedKeys = [item.id]; // 更新选中的节点的id
    //     }
    //   }
    // },
    renderContent(h, { node, data }) {
      if (data.value === 'checkbox') {
        return h('span', { class: 'custom-node' }, [
          h('el-checkbox', {
            class: 'custom-checkbox',
            // props: {
            //   value: this.checkedKeys.includes(data.id) // 根据选中的节点的id判断复选框是否选中
            // },
            on: {
              change: ($events, value) => {
                alert('change');
                console.log('value', $events, value, )
                if (value) {
                  this.checkedKeys = [data.id]; // 更新选中的节点的id
                } else {
                  this.checkedKeys = []; // 清空选中的节点的id
                }
              }
            }
          }),
          h('span', { class: 'custom-label' }, data.label)
        ]);
      } else if (data.value === 'checkmark') {
        return h('span', { class: 'custom-node' }, [
          h('i', { class: 'custom-icon el-icon-check' }),
          h('span', { class: 'custom-label' }, data.label)
        ]);
      } else {
        return h('span', { class: 'custom-node' }, [
          h('span', { class: 'custom-label' }, data.label)
        ]);
      }
    },
  },
  beforeDestroy() {
    console.log('卸载之前');
  },
  destroyed() {
    console.log('卸载之后');
  }
};
</script>

<style scoped>
/* :deep(.stafftree > .el-tree-node > .el-tree-node__content .el-checkbox) {
  display: none;
} */

.custom-node {
  display: flex;
  align-items: center;
}

:deep(.custom-checkbox) {
  margin-right: 225px;
}
</style>