vue3+view-ui-plus+tree组件实现自定义树形控件
展示效果
实现方式
<template>
<Tree :data="treeData" :render="renderContent"></Tree>
</template>
<script setup>
let treeData = ref([
{
id: '1',
title: '1',
expand: true,
children: [{
id: '1-1',
title: '1-1',
children: [
{
id: '1-1-1',
title: '1-1-1',
}
]
},
{
id: '1-2',
title: '1-2',
children: [
{
id: '1-2-1',
title: '1-2-1',
}
]
},
{
id: '1-3',
title: '1-3',
},
{
id: '1-4',
title: '1-4',
}
]
}
])
const renderContent = (h, {
root, node, data }) => {
if (data.nodeKey === 0) {
return h('span', {
class: 'tree-item',
style: {
display: 'inline-block',
width: '100%'
},
}, [
h('span', {
class: 'tree-title',
}, data.title),
]);
} else {
return h('span', {
class: 'tree-item',
style: {
display: 'inline-block',
width: '100%'
},
}, [
h('span', {
class: 'tree-title',
}, data.title),
h('span', {
class: 'tree-option',
style: {
display: 'inline-block',
float: 'right',
marginRight: '10px'
}
}, [
h('span', {
class: 'tree-option-delete',
onClick: () => {
removeEquipment(root, node, data)
}
}, '删除')
])
]);
}
}
const removeEquipment = (root, node, data) => {
console.log(root, node, data)
}
</script>