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>
<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>
另一种写法不用h的写法