<script setup>
// import {Table, TableColumn} from '@king-design/vue';//ssr打包报错，启动会注入ksconsole/components和kpc
import tree from './tree.vue'
const filedHeaders=[
  {key:"field",title:"属性"},
  {key:"type",title:"类型"},
  {key:"defaultValue",title:"默认值"},
  {key:"desc",title:"描述"},
]
		
const eventHeaders=[
  {key:"field",title:"事件名"},
  {key:"desc",title:"说明"},
  {key:"params",title:"参数"},
]

const filedData= [
                {
                    field: 'data',
                    type: 'Array',
                    defaultValue: "[]",
                    desc: "tree数据,数组格式,如[{label:'标题',children:[],key:'1',disabled:false,loaded:true}]。对象属性包括：label 标题，children 子节点，key 节点唯一标识，disabled 是否禁用节点，loaded 是否已经完成异步加载"
                },
                {
                    field: 'selectable',
                    type: 'Boolean',
                    defaultValue: "true",
                    desc: "节点是否可选中"
                },
                {
                    field: 'checkbox',
                    type: 'Boolean',
                    defaultValue: "false",
                    desc: "是否显示复选框"
                },
                {
                    field: 'draggable',
                    type: 'Boolean',
                    defaultValue: "true",
                    desc: "是否可拖拽"
                },
                {
                    field: 'showLine',
                    type: 'Boolean',
                    defaultValue: "true",
                    desc: "是否显示树连线"
                },
                {
                    field: 'showRootAppend',
                    type: 'Boolean',
                    defaultValue: "false",
                    desc: "是否显示添加一级节点按钮"
                },
                {
                    field: 'useInnerSearch',
                    type: 'Boolean',
                    defaultValue: "true",
                    desc: "是否启用内部搜索"
                },
                {
                    field: 'showSearch',
                    type: 'Boolean',
                    defaultValue: "true",
                    desc: "是否显示搜索框"
                },
                {
                    field: 'expandedKeys',
                    type: 'Array',
                    defaultValue: "[]",
                    desc: "默认展开的节点，传入key数组。展开子节点时，需要指定所有父节点也展开"
                },
                {
                    field: 'titleAlign',
                    type: 'String',
                    defaultValue: "left",
                    desc: "节点标题对齐方式，默认左对齐"
                },
            ];

const eventData=[
  {
    field: 'append',
    desc: "添加子节点，非一级节点",
    params:  "({data, node, index}),data:节点数据，node: 操作的节点，index：当前操作节点在父节点下的索引"
  },
  {
    field: 'rootAppend',
    desc: "添加一级节点",
    params: "无"
  },
  {
    field: 'remove',
    desc: "删除节点", 
    params: "({data, node, index}),data:节点数据，node: 操作的节点，index：当前操作节点在父节点下的索引"
    }
    ,
  {
    field: 'edit',
    desc: "编辑节点", 
    params: "({data, node, index}),data:节点数据，node: 操作的节点，index：当前操作节点在父节点下的索引"
    }
    ,
  {
    field: 'dragend',
    desc: "拖拽节点结束", 
    params: "(mode,srcNode,toNode),srcNode: '源节点', toNode: '目标节点', mode: '插入模式, Before: 插入节点前面, After: 插入节点后面, Inner: 插入节点内部'"}
    ,
  {
    field: 'search',
    desc: "搜索节点", 
    params: "(keywords:String),keywords:搜索关键字"}
    ,
]   
</script>

# 树 {#KSTree}

`KSTree` 是基于金山云@king-design/vue@3 UI 框架二次封装的树形组件，用于展示树形组织数据，支持搜索、拖拽，新增，删除节点等功能。

## 功能

- **搜索**：搜索指定名称的节点。
- **添加**：支持添加一级节点及以上级别节点。
- **删除**：支持删除节点。
- **修改**：支持编辑节点。
- **拖拽**：支持同级节点拖拽排序。

## 示例

<ClientOnly>
<tree/>
</ClientOnly>

## 输入属性
<ClientOnly>
 <Table :data="filedData" resizable checkType="none" type="grid">
 <TableColumn v-for="(header, index) in filedHeaders" :key="header.key"  :title="header.title" />
 </Table>
</ClientOnly>

## 公开属性和方法
- tree:方法。获取tree实例，其他tree原生方法请参考官方文档。

## 扩展点
- 预留默认插槽，支持传入tree顶部标题，如组织、项目
- label：```自定义节点渲染内容，参数：([data: TreeDataItem<K>, node: TreeNode<K>, index: number]) => Children```

## 事件

<ClientOnly>
 <Table :data="eventData" resizable checkType="none" type="grid">
 <TableColumn v-for="(header, index) in eventHeaders" :key="header.key"  :title="header.title" />
 </Table>
</ClientOnly>

这里是完整代码

<div class="options-api" style="font-size:14px;">

```vue
<script setup>
// import { KSTree } from '@ksconsole/components'
import { reactive, ref, nextTick } from "vue";
// import { getTreeData } from "../../mock/index.js";
// 模拟tree数据如下
const data = [
  {
    label: "燃气采购项目",
    key: "1",
    children: [
      {
        label: "燃气采购项目-1期",
        key: "1-1",
        isDisabled: true,
        children: [
          {
            label: "燃气采购项目-1-1期",
            key: "1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "水务采购项目",
    key: "2",
    children: [
      {
        label: "水务采购项目-1",
        key: "2-1",
        children: [
          {
            label: "水务采购项目1-1",
            key: "2-1-1",
          },
          {
            label: "水务采购项目1-2",
            key: "2-1-2",
            // disabled: true,
          },
        ],
      },
      {
        label: "水务统管项目",
        disabled: true,
        key: "2-2",
        children: [
          {
            label: "水务统管项目1",
            key: "2-2-1",
          },
        ],
      },
    ],
  },
];
/* 
const treeData = ref([]);
// 获取tree数据
async function getTreeDataApi() {
  treeData.value = await getTreeData();
}
getTreeDataApi(); */

const treeData = ref(data);
const treeRef = ref(null);
const uniqueId = ref(100);
let selectedKeys = ref([])
selectedKeys.value=[treeData.value[1].key]

// 异步展开子节点，在子组件渲染后调用
function expandNode(key) {
  nextTick(() => {
    // 在这里，你可以调用子组件的展开方法
    treeRef.value.tree.expand(key);
  });
}
// 添加子节点
function appendNode({ data, node, index }) {
  console.log("父组件监听到appendNode事件", data, node, index);
  data.children = data.children || [];
  uniqueId.value++;
  data.children.push({
    key: `${uniqueId.value}`,
    label: "子节点" + `${uniqueId.value}`,
  });
  expandNode(data.key);
}
// 添加一级节点
function rootAppendNode() {
  console.log("父组件监听到rootAppendNode事件");
  uniqueId.value++;
  treeData.value.push({
    key: `${uniqueId.value}`,
    label: "子节点" + `${uniqueId.value}`,
  });
}
// 删除节点
function removeNode({ data, node, index }) {
  console.log("父组件监听到removeNode事件", data, node, index);
  const children = node.parent ? node.parent.data.children : treeData.value;
  children.splice(index, 1);
}
// 编辑节点
function editNode({ data, node, index }) {
  console.log("父组件监听到editNode事件", data, node, index);
}
// 拖拽节点
function dragend(data) {
  console.log("父组件监听到dragend事件", data);
}
// 搜索节点
function searchNode(keywords) {
  console.log("父组件监听到searchNode事件", keywords);
}
// 节点选中变化
function changeSelectedKeys(data) {
  console.log("父组件监听到changeSelectedKeys事件", data);
}
</script>

<template>
  <div class="main-content">
    <KSTree
      ref="treeRef"
      :data="treeData"
      @append="appendNode"
      @rootAppend="rootAppendNode"
      @remove="removeNode"
      @edit="editNode"
      @dragend="dragend"
      @search="searchNode"
      :showRootAppend="true"
      titleAlign="left"
      :selectedKeys="selectedKeys"
      @changeSelectedKeys="changeSelectedKeys"
      >组织</KSTree
    >
  </div>
</template>

```

</div>

目前支持所有@king-design/vue的Tree的属性、事件、方法，kpc原生Tree完整用法请查看[Tree 文档](https://design.ksyun.com/components/tree/)
