vue3+view-ui-plus+tree组件实现自定义树形控件

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',
      }
    ]
  }
])
/**
 * 树组件的数据渲染方法
 * @param h 渲染函数
 * @param root 树的根节点
 * @param node 当前节点
 * @param data 当前节点数据
 * @returns {*}
 */
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>