GapLeftTree

左侧树组件，使用 antdesign 的 tree 组件封装，自定义添加了操作按钮

说明

当有 expandedKeys 时，defaultExpandAll 将失效；
设置默认展开节点时请设置存在子节点的节点，不要设置叶子节点（即没有子节点的节点），否则节点展开会有问题；

基本用法

组件演示

示例

vue

<template>
  <div style="width: 400px; height: 100%">
    <GapLeftTree
      :tree-config-data="configData"
      style="padding: 50px"
      @customAdd="customAdd"
      @customHandle="customHandle"
      @node-select="nodeSelect"
    />
  </div>
</template>

<script setup lang="ts">
import GapLeftTree from '../package/gap-left-tree/index.vue'
import { treeConfig } from 'ctj-ui-next/lib/index'
import { ref } from 'vue'
let configData = ref<treeConfig>({
  isAdd: false,
  isAll: true,
  isSearch: true,
  placeholder: '请输入关键字',
  fieldNames: {
    title: 'name',
    key: 'id',
    children: 'children',
  },
  treeData: [
    {
      name: '一级',
      id: '01',
      children: [
        {
          name: '一级子级1',
          id: '0101',
          status: 0,
          children: [
            {
              name: '二级子级1',
              id: '010101',
            },
            {
              name: '二级子级2',
              id: '010102',
            },
          ],
        },
        {
          name: '一级子级2',
          id: '0102',
        },
      ],
    },
  ],
  handleBtn: [
    {
      code: 'edit',
      title: '编辑',
      visibleHandle: data => {
        if (data.status == 0) {
          return false
        } else {
          return true
        }
      },
    },
    {
      code: 'delete',
      title: '删除',
    },
  ],
})
//新增事件
const customAdd = () => {
  console.log('新增节点')
}
//节点右侧操作按钮事件
const customHandle = (code: string, record: any) => {
  console.log('code:', code, record)
}
//节点单击事件
const nodeSelect = (val: any, nodes) => {
  console.log('val:', val, nodes)
}
</script>
<style scoped lang="less"></style>

<template>
  <div style="width: 400px; height: 100%">
    <GapLeftTree
      :tree-config-data="configData"
      style="padding: 50px"
      @customAdd="customAdd"
      @customHandle="customHandle"
      @node-select="nodeSelect"
    />
  </div>
</template>

<script setup lang="ts">
import GapLeftTree from '../package/gap-left-tree/index.vue'
import { treeConfig } from 'ctj-ui-next/lib/index'
import { ref } from 'vue'
let configData = ref<treeConfig>({
  isAdd: false,
  isAll: true,
  isSearch: true,
  placeholder: '请输入关键字',
  fieldNames: {
    title: 'name',
    key: 'id',
    children: 'children',
  },
  treeData: [
    {
      name: '一级',
      id: '01',
      children: [
        {
          name: '一级子级1',
          id: '0101',
          status: 0,
          children: [
            {
              name: '二级子级1',
              id: '010101',
            },
            {
              name: '二级子级2',
              id: '010102',
            },
          ],
        },
        {
          name: '一级子级2',
          id: '0102',
        },
      ],
    },
  ],
  handleBtn: [
    {
      code: 'edit',
      title: '编辑',
      visibleHandle: data => {
        if (data.status == 0) {
          return false
        } else {
          return true
        }
      },
    },
    {
      code: 'delete',
      title: '删除',
    },
  ],
})
//新增事件
const customAdd = () => {
  console.log('新增节点')
}
//节点右侧操作按钮事件
const customHandle = (code: string, record: any) => {
  console.log('code:', code, record)
}
//节点单击事件
const nodeSelect = (val: any, nodes) => {
  console.log('val:', val, nodes)
}
</script>
<style scoped lang="less"></style>

属性 Props

参数	说明	类型	是否必传	默认值
treeConfigData	配置项	treeConfig	是	参考treeConfig 说明

事件 Events

事件名	说明	回调参数	参数说明
nodeSelect	节点单击事件	(selectedKeys, selectedNodes)	selectedKeys 当前点击的节点 key / selectedNodes 当前点击的节点对象
customAdd	新增 icon 事件	无	--
customHandle	节点右侧操作按钮事件	(code, record)	code 当前单击的按钮 code / record 当前单击的节点数据
nodeBeforeChange	树节点切换限制函数	Promise	-

参数说明

treeConfig 说明

属性名	说明	类型	是否必传	默认值
treeData	树形数据	DataItem[]	是	[]
isSearch	是否显示顶部输入框查询条件	Boolean	否	true
placeholder	顶部输入框提示语	String	否	请输入
isAll	是否显示"全部"	Boolean	否	true
isAdd	是否显示"新增 icon"	Boolean	否	true
handleBtn	操作按钮	treeBtnItem[]	否	参考treeBtnItem 说明
fieldNames	替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段	fieldName	否	参考fieldName 说明
defaultDatas	设置默认展开节点和默认单击节点	defaultTreeDatas	否	参考defaultTreeDatas 说明
height	树组件高度	string	否	存在搜索时 calc(100vh - 172px)，不存在搜索时 calc(100vh - 140px)
allTitle	自定义“全部”title	String	否	全部
expandAction	目录展开逻辑，传false是单击节点不展开目录，只在点击左侧箭头图标时展开收起节点	false/'cilck'/'dblclick'	否	'click'
allIsSelectable	“全部”节点是否允许被选择	boolean	否	false

treeBtnItem 说明

属性名	说明	类型	可选值
code	按钮编码	string	''
title	按钮名称	string	''
visibleHandle	按钮是否显示	Function

fieldName 说明

属性名	说明	类型	可选值
key	节点唯一标识字段	String	默认 key
title	节点显示名称字段	String	默认 title
children	子元素字段	String	默认 children

defaultTreeDatas 说明

属性名	说明	类型	可选值
defaultSelectedNodes	默认单击的节点	DataItem	不传是默认单击第一个节点的最末级叶子结点
defaultExpandKeys	默认展开的节点 key 组成的数组	any[]	不传时默认展开第一个节点的最末级存在子节点的第一个节点

GapLeftTree ​

基本用法 ​

属性 Props ​

事件 Events ​

参数说明 ​

treeConfig 说明 ​

​

treeBtnItem 说明 ​

​

fieldName 说明 ​

​

defaultTreeDatas 说明 ​

​

GapLeftTree

基本用法

属性 Props

事件 Events

参数说明

treeConfig 说明

treeBtnItem 说明

fieldName 说明

defaultTreeDatas 说明