# Tree-select 选择器 UPDATE

用于选择树形的数据结构，具有层级关系的选择器。

树选择器 👇👇👇

# 代码演示

国际化（多语言）

1、超出一行显示省略号 2、以字母省略 3、鼠标悬浮：考虑到性能问题，悬浮可以用原生 title 支持

Vue.use(WinDesign, { i18nOverflow: true })

# API

# Attributes

参数	说明	类型	可选值	默认值	Version
filter-node-method	对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏	Function(value, data, node)	—	-	V2.2.1
leaf-only	是否只是叶子节点	Boolean	—	false	v2.1.4
include-half-checked	是否包含半选节点	Boolean	—	false	v2.1.4
accordion	是否启用手风琴模式	Boolean	—	false
clearable	是否可以清空	Boolean	—	false
collapse-tags	多选时是否将选中值按文字的形式展示	Boolean	—	false
default-expand-all	是否默认展开所有节点	Boolean	—	false
expand-on-click-node	是否在点击节点的时候展开或者收缩节点，默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。	Boolean	—	true
force-expand-on-click-node	是否在当结点设置了 selectable = false 时，仍旧可以点击节点的时候展开或者收缩节点。	Boolean	—	false	V2.4.13
filterable	下拉 tree 是否可以筛选	Boolean	—	false
multiple	是否多选	Boolean	—	false
multiple-limit	多选时用户最多可以选择的项目数，为 0 则不限制	Number	—	0	V2.5.0
popover-class	为展开面板添加 class	String	—	—
placement	展开面板展开的方向	String	'top' \| 'right' \| 'bottom' \| 'left' 及各方向的修饰符(-start, -end)	'bottom'
placeholder	select 输入框占位符	String	—	请选择
tree-render	树的渲染函数	Function	—	—
tree-click-parent	在有子级的情况下是否点击父级关闭弹出框,false 只能点击子级关闭弹出框	Boolean	—	false
tree-data	tree 的数据	Array	—	—
tree-props	tree 配置选项，具体看下表	Object	—	—
tree-other-props	用于同步`tree`组件新增的其他功能属性	Object	—	—
styles	样式配置选项，具体见下表	Object	—	—
~~show-checkbox~~	是否显示复选框	Boolean	—	false	v2.1.4
select-disabled	是否禁用选择器	Boolean	—	false
select-other-props	用于同步`select`组件新增的其他功能属性	Object	—	—
v-model / value	当前选中的值	String \| Array \| Number	—	''
value-key	作为 value 唯一标识的键名，绑定值为对象类型时必填	String	—		V2.2.20
close-on-select	在单选情况下选中节点是否关闭面板	Boolean	true		V2.4.5
tree-key	动态更新 tree	String/Number	-		V2.4.30

# styles

参数	说明	类型	可选值	默认值	Version
width	宽度	String	—	—

# treeProps

参数	说明	类型	可选值	默认值
label	指定节点标签为节点对象的某个属性值	String, Function(data, node)	—	name
children	指定子树为节点对象的某个属性值	String	—	children
disabled	指定节点选择框是否禁用为节点对象的某个属性值	Boolean, Function(data, node)	—	disabled
value	指定节点标签为节点对象的某个值	String	—	flowId

# Events

事件名称	说明	回调参数	Version
check	树勾选的回调	三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-click	树节点被点击时的回调,和 w-tree 参数一致	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
remove-tag	移除单个标签，返回所有勾选的 ids，以及当前移除的 tag（可能为中文）标签	目前的选中值, 当前删除的 value 值
select-clear	下拉框清空事件	目前的选中值
search	树过滤前端过滤：this.$refs.treeSelect.$refs.tree.filter(value)；后端过滤：this.$refs.treeSelect.treeDataUpdateFun(data)
toggle-popover	当选择器面板显示或隐藏时被触发	面板显示或隐藏状态布尔值	v1.7.1

# Methods

事件名称	说明	回调参数	Version
clearInnerInput	清空内部输入框内容		v1.7.1
treeDataUpdateFun	树更新数据

# Slots

name	说明	Version
panel-header	面板顶部内容	v2.2.0
panel-footer	面板底部内容	v2.4.30

# 常见问题

1、从服务端返回数据并成功赋值，为什么面板上仍旧为空？

this.treeSelectParams.treeData = this.handleSelectable(data) // 赋值
setTimeout(() => {
  this.$refs.treeSelect.treeDataUpdateFun(data) // 更新面板
}, 300)

1
2
3
4

2、为什么取消 w-tree 的 show-checkbox 参数？

因为在使用 w-tree 的一些内部方法如：getCheckedNodes 时需要设置 show-checkbox，所以取消人为设定，改成由下拉框参数 multiple 决定。