# TreeX 树形组件增强版

# 基础用法

<template>
  <div>
    <gd-tree-x
      :data-props="dataProps"
      :data="data2"
      filter-name="1"
      show-checkbox
      branch-icon="folder"
      switcher-icon="download"
      leaf-icon="user"
    ></gd-tree-x>

    <gd-tree-x
      accordion
      :data-props="dataProps"
      :data="data1"
      branch-icon="folder"
      leaf-icon="user"
    ></gd-tree-x>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataProps: {
        leaf: node => (node.title + "").includes("leaf")
      },
      data1: [
        {
          title: 1,
          id: 1,
          children: [
            {
              title: "2",
              id: 2,
              children: [
                {
                  title: "444",
                  id: 6
                }
              ]
            },

            {
              title: "333",
              id: 5,
              children: [
                {
                  title: "777",
                  id: 7
                }
              ]
            }
          ]
        },
        {
          title: "3",
          id: 3,
          children: [
            {
              title: "4",
              id: 4
            }
          ]
        }
      ],
      data2: [
        {
          title: "parent 1",
          id: 1,
          expand: true,
          children: [
            {
              title: "parent 1-1",
              expand: true,
              id: 2,
              children: [
                {
                  title: "leaf 1-1-1",
                  id: 3,
                  disabled: true
                },
                {
                  title: "leaf 1-1-2",
                  id: 4
                }
              ]
            },
            {
              title: "parent 1-2",
              expand: true,
              disableCheckbox: true,
              id: 5,
              children: [
                {
                  title: "leaf 1-2-1",
                  id: 6
                },
                {
                  title: "leaf 1-2-1",
                  id: 7
                }
              ]
            }
          ]
        }
      ]
    };
  }
};
</script>

# 异步加载

[]

<template>
  <div>
    <gd-tree-x :data="data3" combine :checked-keys="keys" :default-checked-keys="dKeys" :load-data="loadData" show-checkbox @checkchange="onCheckChange"></gd-tree-x>
    <div style="float: right;position:relative;top: -40px;">{{ keys }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
      data3: [
        {
          title: "parent",
          id: 1,
          loading: false,
          children: []
        }
      ],
      keys: [],
      dKeys: [3]
    };
  },
  methods: {
    onCheckChange(_ , keys){
        this.keys = keys
    },
    loadData(item, callback) {
      setTimeout(() => {
        const data = [
          {
            title: "children",
            loading: false,
            id: this.count+1,
            children: []
          },
          {
            title: "children",
            loading: false,
            id: this.count+2,
            children: []
          }
        ];
        this.count += 2
        callback(data);
      }, 1000);
    }
  }
};
</script>

# 自定义渲染

<template>
  <div>
    <gd-tree-x :data="data2" branch-icon="folder" :render-content="renderContent" leaf-icon="user"></gd-tree-x>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data2: [
        {
          title: "parent 1",
          id: 1,
          expand: true,
          children: [
            {
              title: "parent 1-1",
              expand: true,
              id: 2,
              children: [
                {
                  title: "leaf 1-1-1",
                  id: 3
                },
                {
                  title: "leaf 1-1-2",
                  id: 4
                }
              ]
            },
            {
              title: "parent 1-2",
              expand: true,
              id: 5,
              children: [
                {
                  title: "leaf 1-2-1",
                  id: 6,
                  disabled: true
                },
                {
                  title: "leaf 1-2-2",
                  id: 7
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    renderContent(h, { node, data }) {
      if (node.id === 7) {
        return (
          <span>
            {data.title}
            <gd-button size="small" style="margin-left: 10px">
              点击
            </gd-button>
          </span>
        );
      } else {
        return <span>{data.title}</span>;
      }
    }
  }
};
</script>

# 属性配置

# props

参数	说明	类型	可选值	默认值
data	数据	Array	-	-
dataProps	数据配置，具体看下方	Object	-	-
multiple	是否可多选	Boolean	-	false
selective	是否可选	Boolean	-	true
checkedKeys	当前勾选的 keys	Array	-	[]
defaultCheckedKeys	默认勾选的 keys	Array	-	[]
selectedKeys	当前选择的 keys	Array	-	[]
filterName	过滤，高亮节点	String	-	-
accordion	手风琴模式	Boolean	true/false	false
combine	是否合并节点输出	Boolean	true/false	false
show-checkbox	是否显示筛选框	Boolean	-	false
branch-icon	树枝节点图标Icon	String	-	-
switcher-icon	树枝节点展开图标Icon	String	-	-
leaf-icon	喷子节点图标Icon	String	-	-
check-strictly	在显示复选框的情况下，是否严格的遵循父子不互相关联的做法	Boolean	-	false
check-directly	开启后，在 show-checkbox 模式下，select 的交互也将转为 check	Boolean	-	false
empty-text	数据为空占位符	String	-	暂无数据
load-data	异步加载数据函数	Function	-	-
render-content	自定义渲染节点内容	Function(h, {node, data})	-	-

# events

事件名	说明	返回值
toggle	节点展开收缩事件	node
selectchange	节点选中改变事件	selectedNodes, node
checkchange	节点复选状态改变事件	checkedNodes, checkedNodeKeys, Node

# dataProps

属性	说明	类型	默认值
title	指定节点展示名称	String/Function	node => node.title
expand	指定节点是否展开	String/Function	node => node.expand
disabled	指定节点是否禁用	String/Function	node => node.disabled
leaf	指定节点是否为叶子	String/Function	node => node.leaf
id	指定节点唯一key	String/Function	node => node.id
hidden	指定节点是否隐藏	String/Function	node => node.hidden
children	指定节点子节点key	String/Function	node => node.children

# TreeX 树形组件增强版

# 基础用法

# 异步加载

# 自定义渲染

# 属性配置

# props

# events

# dataProps

提示

提示