common-ui/docs/components/tree/base.md

CommonTree 树结构

基础用法

:::demo

<template>
  <div style="width:200px">
    <common-tree title="" 
      :btnText="'新增一级目录'" 
      :searchText="'请输入目录名称'"
      :actions="actions"
      :is-icon="true"
      :treeData="treeData"
      ></common-tree>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
const {proxy} = getCurrentInstance()


const treeData = ref([
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
])

function deleteFn(data) {
  console.log(data)
  proxy.$message(`${data}`)

}
const actions = ref<any>([
  {
    label: '删除',
    name: 'common-shanchu',
    type: 'danger',
    size: 14,
    onClick: deleteFn
  }
]);

</script>

<style>

.__common-layer-bread {
  height: 50px;
  padding-left: 26px;
  display: flex;
  align-items: center;
}
</style>

:::

配置参数

参数	说明	类型	是否必须
attrs	树组件继承el-tree的原始属性，支持所有吧原始属性的扩展	Object[]	false
actions	树组件右侧操作栏位	Object[]	false
----label		String	true
----name	如果为icon类型时，此栏位为icon的name，如果为文字时，次来为为操作说明name	String	true
----type	对应danger，warning， info， primary	String	false
----size	icon大小，仅为icon时生效	String	false
hasFilter	是否要搜索框，默认为true	Boolean	false
searchText	搜索框内placeholder文案	String[]	false
treeData	树组件数据	Array[]	true
btnText	新增按钮文字	Srtring[]	false

事件

事件名称	说明	回调
addRootLevel	添加一级目录回调，当存在一级目录添加按钮时生效	--
nodeClick	节点点击时生效	--