AIoT前端基础组件文档

Appearance

Return to top
On this page

CommonTree 树结构

基础用法 

<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>

<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
----labelStringtrue
----name如果为icon类型时，此栏位为icon的name，如果为文字时，次来为为操作说明nameStringtrue
----type对应danger，warning， info， primaryStringfalse
----sizeicon大小，仅为icon时生效Stringfalse
hasFilter是否要搜索框，默认为trueBooleanfalse
searchText搜索框内placeholder文案String[]false
treeData树组件数据Array[]true
btnText新增按钮文字Srtring[]false

事件

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