# TreeSelect 树型选择

# 引入

import { H3TreeSelect } from '@lateinos/awesome-ui';

export default {
  components: {
    H3TreeSelect,
    H3TreeSelectNode: H3TreeSelect.TreeNode,
    H3TreeFilterNode: H3TreeSelect.TreeFilterNode,
  },
};

# 基本用法 h3

当 defaultValue 和 value(v-model) 为 ''、null、['']、[null]等情况

# 从数据生成

# 自定义搜索无数据展示

官方1.4.10文档没写，TreeSelect是可以定义notFoundContent参数，来自定义搜索不到时，无数据的展示的，而且可以传VNode。

# 自定义搜索结果 h3

自定义搜索结果是奥哲组件对原Antd组件的一层封装，将搜索完全交给组件外部；

可以通过定义插槽slot: filter, 并传入searchValue来开启自定义搜索。并在插槽中用H3TreeFilterNode组件包裹搜索结果内容；

需要注意以下几点：

封装后的优势

可以实现异步搜索（从服务器搜索数据），这在原Antd组件中是没有的；
可以自定义搜索结果的展示内容，平铺搜索结果；增强了灵活性；
兼容了原h3-antd-vue组件库的功能，罪魁祸首是这个；

注意事项

要启用自定义搜索，必须利用search事件，获取到searchValue, 再将searchValue传回到组件中；
自定义搜索的内容必须用奥哲扩展的组件H3TreeFilterNode包裹搜索内容，否则内容不会展示；
一旦自定义了搜索内容, 必须设置H3TreeFilterNode组件的key和value, 使之与原数据对应；并且其中的点击事件，弹窗收起都需要自己实现；
开启了自定义搜索后，原官方的自定义搜索方法filterTreeNode, 将不再生效；

<template>
  <h3-tree-select
    ref="treeSelect"
    showSearch
    placeholder="请选择表单"
    searchPlaceholder="请输入表单名称"
    :value="value"
    :style="{width: '300px'}"
    :searchValue="searchValue"
    notFoundContent="未找到匹配数据"
    :treeData="treeData"
    @change="onChange"
    @search="onSearch"
    @select="onSelect"
  >
    <div slot="filter">
      <h3-tree-filter-node
        v-for="node in searchData"
        :key="node.key"
        :value="node.value"
        :title="node.title"
        @click="onSearchClick(node.value)"
      >
        <p class="app-title" v-html="highLightSearchKey(node.title)">
        </p>
        <p class="app-name" v-html="highLightSearchKey(node.appName)">
        </p>
      </h3-tree-filter-node>
    </div>
  </h3-tree-select>
</template>
<script>
const searchNodes = async (searchKey) => {
  const forms = [
    { title: '表单1-1', appName: '应用1', key: '1-1', value: '1-1' },
    { title: '表单1-2', appName: '应用1', key: '1-2', value: '1-2' },
    { title: '表单2-1', appName: '应用2', key: '2-1', value: '2-1' },
    { title: '表单2-2', appName: '应用2', key: '2-2', value: '2-2' },
  ];
  return forms.filter(form => form.title.includes(searchKey));
};
export default {
  name: 'CustomSearchDemo',
  data () {
    return {
      value: '',
      searchValue: '',
      searchData: [],
      treeData: [
        {
          title: '应用1',
          value: '1',
          key: '1',
          children: [
            {
              title: '表单1-1',
              value: '1-1',
              key: '1-1',
            },
            {
              title: '表单1-2',
              value: '1-2',
              key: '1-2',
            },
          ],
        },
        {
          title: '应用2',
          value: '2',
          key: '2',
          children: [
            {
              title: '表单2-1',
              value: '2-1',
              key: '2-1',
            },
            {
              title: '表单2-2',
              value: '2-2',
              key: '2-2',
            },
          ],
        },
      ],
    };
  },
  methods: {
    onChange (value) {
      console.log(value);
      this.value = value;
    },
    async onSearch(searchKey) {
      // 此处是异步搜索
      this.searchValue = searchKey;
      this.searchData = await searchNodes(searchKey);
    },
    onSearchClick(selectedValue) {
      this.value = selectedValue;
      this.$refs.treeSelect.hide();
    },
    onSelect() {
      console.log('onSelect')
    },
    highLightSearchKey(str) {
      const searchValue = this.searchValue;
      return str.replace(searchValue, `<span class="highlight">${searchValue}</span>`);
    },
  },
};
</script>
<style lang="less">
.highlight {

  color: @h3-primary-color;

}
</style>

# 异步加载数据、异步搜索数据

注意事项

若存在异步加载数据的情况，使用搜索时可能存在搜索出来的数据在tree数据中并未有加载的情况。
因此直接赋值prop:value为筛选项的value会出现选择框直接呈现value的情况。
对此，系统组建议直接赋值prop:value为筛选项的title（这里要保证筛选项value和title永远都不会出现相同的情况），就可以正常显示，同时在获取选中项进行下一步操作时需要对选择项进行特殊处理，保证获取的选择项是完整的数据。

<template>
  <h3-tree-select
    ref="treeSelect"
    showSearch
    placeholder="请选择表单"
    searchPlaceholder="请输入表单名称"
    :value="value"
    :loadData="loadChildrenData"
    :style="{width: '300px'}"
    :searchValue="searchValue"
    notFoundContent="未找到匹配数据"
    :treeData="treeData"
    @change="onChange"
    @search="onSearch"
    @select="onSelect"
  >
    <div slot="filter">
      <h3-tree-filter-node
        v-for="node in searchData"
       :key="node.key"
        :value="node.value"
        :title="node.title"
        @click="onSearchClick(node.title)"
      >
        <p class="app-title" v-html="highLightSearchKey(node.title)">
        </p>
        <p class="app-name" v-html="highLightSearchKey(node.appName)">
        </p>
      </h3-tree-filter-node>
    </div>
  </h3-tree-select>
</template>
<script>
const searchNodes = async (searchKey) => {
  const forms = [
    { title: '表单1-1', appName: '应用1', key: '1-1', value: '1-1' },
    { title: '表单1-2', appName: '应用1', key: '1-2', value: '1-2' },
    { title: '表单2-1', appName: '应用2', key: '2-1', value: '2-1' },
    { title: '表单2-2', appName: '应用2', key: '2-2', value: '2-2' },
  ];
  return forms.filter(form => form.title.includes(searchKey));
};
export default {
  name: 'CustomLoadSearchDemo',
  data () {
    return {
      value: '',
      searchValue: '',
      searchData: [],
      treeData: [
        {
          title: '应用1',
          value: '1',
          key: '1',
          children: [],
        },
        {
          title: '应用2',
          value: '2',
          key: '2',
          children: [],
        },
      ],
    };
  },
  methods: {
    onChange (value) {
      console.log(value);
      this.value = value;
    },
    findParent (data, value) {
      let target = data.find(item => item.value === value);
      if (!target) {
        for (let i = 0, item; i < data.length; i++) {
          item = data[i];
          if (item.children) {
            target = this.findParent(item.children, value);
            if (target) {
              break;
            }
          }
        }
      }
      return target;
    },
    loadChildrenData (treeNode) {
      // 模拟异步加载数据
      const value = treeNode.value;
      const target = this.findParent(this.treeData, value);
      return new Promise(resolve => {
        setTimeout(() => {
          target.children = [{
            title: `表单${value}-1`,
            value: `${value}-1`,
            key: `${value}-1`,
            children: [],
          },
          {
            title: `表单${value}-2`,
            value: `${value}-2`,
            key: `${value}-2`,
            children: [],
          },
          {
            title: `表单${value}-3`,
            value: `${value}-3`,
            key: `${value}-3`,
            children: [],
          }];
          resolve();
        }, 300);
      });
    },
    async onSearch (searchKey) {
      this.searchValue = searchKey;
      // 此处是异步搜索
      this.searchData = await searchNodes(searchKey);
    },
    onSearchClick (selectedValue, node) {
      console.log(selectedValue, node) // 需要继续特殊处理
      this.value = selectedValue;
      this.$refs.treeSelect.hide();
    },
    onSelect () {
      console.log('onSelect');
    },
    highLightSearchKey (str) {
      const searchValue = this.searchValue;
      return str.replace(searchValue, `<span class="highlight">${searchValue}</span>`);
    },
  },
};
</script>
<style lang="less">
.highlight {
  color: @h3-primary-color;
}
</style>

# 后缀展开图标

<template>
  <h3-tree-select
    ref="treeSelect"
    showSearch
    placeholder="请选择数据"
    searchPlaceholder="请输入搜索数据"
    :value="value"
    :style="{width: '300px'}"
    notFoundContent="未找到匹配数据"
    :treeData="treeData"
    @change="onChange"
    @search="onSearch"
    @select="onSelect"
  >
    <a-icon slot="suffixIcon" type="smile" />
  </h3-tree-select>
</template>
<script>
const searchNodes = async searchKey => {
  const forms = [
    { formName: '表单11', appName: '应用1', code: '11' },
    { formName: '表单12', appName: '应用1', code: '12' },
    { formName: '表单21', appName: '应用2', code: '21' },
    { formName: '表单22', appName: '应用2', code: '22' },
  ];
  return forms.filter(form => form.formName.includes(searchKey));
};
export default {
  name: 'CustomSearchDemo',
  data () {
    return {
      value: '',
      searchValue: '',
      searchData: [],
      treeData: [
        {
          title: '应用1',
          value: '1',
          key: '0-1',
          children: [
            {
              value: '11',
              key: '0-0-1',
              title: '表单11',
            },
            {
              value: '12',
              key: '0-0-2',
              title: '表单12',
            },
          ],
        },
        {
          title: '应用2',
          value: '2',
          key: '0-2',
          children: [
            {
              value: '21',
              key: '0-0-21',
              title: '表单21',
            },
            {
              value: '22',
              key: '0-0-22',
              title: '表单22',
            },
          ],
        },
      ],
    };
  },
  methods: {
    onChange (value) {
      this.value = value;
    },
    async onSearch (searchKey) {
      this.searchValue = searchKey;
      // 此处是异步搜索
      this.searchData = await searchNodes(searchKey);
    },
    onSearchClick (selectedValue) {
      this.value = `${selectedValue}`;
      this.$refs.treeSelect.hide();
    },
    onSelect () {
      console.log('onSelect');
    },
    highLightSearchKey (str) {
      const searchValue = this.searchValue;
      return str.replace(
        searchValue,
        `<span class="highlight">${searchValue}</span>`,
      );
    },
  },
};
</script>

# 展开下拉菜单的回调 h3

官方1.4.11未提供对展开菜单的回调，因此奥哲组件增加了该事件。

# API

# Tree props

参数	说明	类型	默认值
allowClear	显示清除按钮	boolean	false
defaultValue	指定默认选中的条目	string/string[]	-
disabled	是否禁用	boolean	false
dropdownClassName	下拉菜单的 className 属性	string	-
dropdownMatchSelectWidth	下拉菜单和选择器同宽	boolean	true
dropdownStyle	下拉菜单的样式	object	-
filterTreeNode	是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值	boolean\|Function(inputValue: string, treeNode: TreeNode) (函数需要返回 bool 值)	Function
getPopupContainer	菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。	Function(triggerNode)	() => document.body
labelInValue	是否把每个选项的 label 包装到 value 中，会把 value 类型从 `string` 变为 `{value: string, label: VNode, halfChecked(treeCheckStrictly 时有效): string[] }` 的格式	boolean	false
loadData	异步加载数据	function(node)	-
maxTagCount	最多显示多少个 tag	number	-
maxTagPlaceholder	隐藏 tag 时显示的内容	slot/function(omittedValues)	-
multiple	支持多选（当设置 treeCheckable 时自动变为 true）	boolean	false
placeholder	选择框默认文字	string\|slot	-
searchPlaceholder	搜索框默认文字	string\|slot	-
searchValue(.sync)	搜索框的值，可以通过 `search` 事件获取用户输入	string	-
treeIcon	是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式	boolean	false
showCheckedStrategy	定义选中项回填的方式。`TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点). `TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点.	enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD }	TreeSelect.SHOW_CHILD
showSearch	在下拉中显示搜索框(仅在单选模式下生效)	boolean	false
size	选择框大小，可选 `large` `small`	string	'default'
suffixIcon	自定义的选择框后缀图标	VNode \| slot	-
treeCheckable	显示 checkbox	boolean	false
treeCheckStrictly	checkable 状态下节点选择完全受控（父子节点选中状态不再关联），会使得 `labelInValue` 强制为 true	boolean	false
treeData	treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（value 在整个树范围内唯一）	array<{value, label, children, [disabled, disableCheckbox, selectable]}>	[]
treeDataSimpleMode	使用简单格式的 treeData，具体设置参考可设置的类型 (此时 treeData 应变为这样的数据结构: [{id:1, pId:0, value:'1', label:"test1",...},...], `pId` 是父节点的 id)	false\|Array<{ id: string, pId: string, rootPId: null }>	false
treeDefaultExpandAll	默认展开所有树节点	boolean	false
treeDefaultExpandedKeys	默认展开的树节点	string[] \| number[]	-
treeExpandedKeys(.sync)	设置展开的树节点	string[] \| number[]	-
treeNodeFilterProp	输入项过滤对应的 treeNode 属性	string	'value'
treeNodeLabelProp	作为显示的 prop 设置	string	'title'
value(v-model)	指定当前选中的条目	string/string[]	-
filter h3		slot	-

# 事件

事件名称	说明	回调参数
change	选中树节点时调用此函数	function(value, label, extra)
search	文本框值变化时回调	function(value: string)
select	被选中时调用	function(value, node, extra)
treeExpand	展开节点时调用	function(expandedKeys)
dropdownVisibleChange h3	展开下拉菜单的回调	function(open)

# Tree 方法

名称	描述
blur()	移除焦点
focus()	获取焦点

# TreeNode props

建议使用 treeData 来代替 TreeNode，免去手工构造麻烦

参数	说明	类型	默认值
selectable	是否可选	boolean	true
disableCheckbox	禁掉 checkbox	boolean	false
disabled	是否禁用	boolean	false
isLeaf	是否是叶子节点	boolean	false
key	此项必须设置（其值在整个树范围内唯一）	string \| number	-
title	树节点显示的内容	string\|slot	'---'
value	默认根据此属性值进行筛选（其值在整个树范围内唯一）	string	-
scopedSlots	使用 treeData 时，可以通过该属性配置支持 slot 的属性，如 `scopedSlots: { title: 'XXX'}`	object	-

# FilterTreeNode props

氚云自定义功能组件，可以自定义搜索结果展示；方便用于异步搜索；

参数	说明	类型	默认值
key	此项必须设置（其值在整个树范围内唯一）	string \| number	-
title	树节点显示的内容	string\|slot	'---'
value	默认根据此属性值进行筛选（其值在整个树范围内唯一）	string	-

← Select 选择组件 Tabs 标签页 →