# Table-select-pro 下拉表格 🎉 V2.5.2

Table-select-pro 由 Select 和 Table 派生而来。

# 代码演示

👋 各位开发同事好：

w-table-select 组件现已升级为 w-table-select-pro（原组件仍保留）。

🚀 新版本亮点：

✅ 支持 v-model 双向绑定：用法更符合 Vue 规范，易于维护。

✅ 分页功能优化：支持分页状态保留、选中项不丢失。

✅ 虚拟滚动表格升级：应对大数据量更流畅。

✅ 修复数据引用问题：在单选或多选场景下，已修正源数据与选中项之间的引用问题，防止相互影响，确保数据隔离。

📌 使用建议：

建议在新开发中优先使用 w-table-select-pro，以享受更完善的功能和更清晰的数据流逻辑。原组件 w-table-select 仍可兼容使用，但后续不再新增功能。

如有迁移问题或使用建议，欢迎随时反馈。

感谢支持！❤️

# API

# TableSelect Attributes （继承 w-table 及 w-select 属性）

参数	说明	类型	可选值	默认值
data	显示的数据	Array	—	—
columns	列配置项	Array	—	—
max-height	Table 的最大高度。合法的值为数字或者单位为 px 的高度。	String \| Number	—	—
height	Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 String 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。	String \| Number	—	—
table-width	table 宽度	Number/String		550px
clearable	是否可以清空选项	Boolean	—	false
collapse-tags	多选时是否将选中值按文字的形式展示	Boolean	—	false
disabled	是否禁用	Boolean	—	false
filterable	是否可搜索	Boolean	—	false
filter-method	自定义搜索方法	Function	—	—
multiple	是否多选	Boolean	—	false
placeholder	占位符	String	—	请选择
popper-class	Select 下拉框的类名	String	—	—
popper-append-to-body	是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false	Boolean	—	true
size	输入框尺寸	String	'medium' \| 'small' \| 'mini'	—
tags-threshold	开启多选且折叠标签时，超过该阈值的选项将被折叠	Number	—	1
value / v-model	绑定值	String \| Number \| Boolean \| Object	—	—
draggable-tag	开启 multiple 且不合并情况下可以配置拖拽已选中 tag 顺序	Boolean	true/false	-
suffix-icon	自定义尾部图标的类名(此时尾部禁止点击打开面板)	String	—
maxlength	可输入时的最大长度	Number	—	0
overflow-height	最大高度，合法的值为数字或者单位为 px 的高度。	String / Number	—	-
show-pagination	是否开启分页	Boolean	—	false
solid-icon	设置后缀图标是否是实心	Boolean	—	false
long	设置选择器宽度随着容器宽度进行适配	Boolean	—	false
currentPage	当前第几页	Number	—	1
pageSize	每页显示个数	Number	—
props	配置选项	Object	—
w-table attributes	参考基础表格	Object	—

# TableSelect Events（继承 w-table 及 w-select 属性）

事件名称	说明	回调参数
blur	当 input 失去焦点时触发	(event: Event)
change	选中值发生变化时触发	目前的选中值
clear	可清空的单选模式下用户点击清空按钮时触发	—
focus	当 input 获得焦点时触发	(event: Event)
remove-tag	多选模式下移除 tag 时触发	移除的 tag 值
visible-change	下拉框出现/隐藏时触发	出现则为 true，隐藏则为 false
tag-drag-start	tag 开始拖拽时触发的事件	event
tag-drag-end	tag 拖拽结束时触发的事件	event、绑定值

# TableSelect Methods（继承 w-table 及 w-select 属性）

事件名称	说明	回调参数	Version
clear	清空选中项
focus	使 input 获取焦点
blur	使 input 失去焦点，并隐藏下拉框

# TableSelect Slots

name	说明	Version
dropdown-header	下拉框头部插槽
dropdown-footer	下拉框底部插槽