TSelectTable 下拉选择表格组件

注意

使用此组件必须:Element-plus版本v2.6以上；@wocwin/t-ui-plus最新版本(v1.3.1以上)。

单选

单选--禁用

多选--禁用复选框

是否显示下拉框

单选 -- 开启键盘事件（上下选择高亮，回车选中）

单选--动态获取下拉数据源

单选--回显不是第一页的label1.4.16

多选--动态获取下拉数据源

不显示首列单选

动态赋默认选中值(单选)

动态赋默认选中值(多选)

单选（默认选中）

多选（默认选中）

多选

开启分页功能（支持翻页选中且默认开启）

复选框分页选中项回显1.5.2

是否隐藏删除icon1.4.14

显示查询条件

查询条件--显示隐藏下拉框按钮

查询条件--下拉框按钮自定义配置

查询条件--样式布局配置

下拉框插槽使用

input 框显示

下拉table是否显示边框1.4.15

下拉table大小1.4.15

远程搜索1.4.16

table loading效果1.5.1

TSelectTable 参数配置

---

1、代码示例

<t-select-table
  :table="table"
  :columns="table.columns"
  :max-height="400"
  :keywords="{ label: 'name', value: 'id' }"
  @radioChange="radioChange"
></t-select-table>

2、配置参数（Attributes）继承 el-table 及 el-select 属性

参数	说明	类型	默认值
v-model:input-value	输入框回显值（isShowInput为true时生效）	Array/ String/Number/Boolean/Object	-
isShowInput	是否输入框显示	Boolean	false
table	表格数据对象	Object	{}
---data	展示下拉数据源	Array	[]
---total	数据总条数	Number	-
---pageSize	每页显示条目个数	Number	-
---currentPage	当前页数	Number	-
columns	表头信息	Array	[]
----bind	el-table-column Attributes	Object	-
----fixed	列是否固定( left, right)	string, boolean	-
----align	对齐方式(left/center/right)	String	center
----render	返回三个参数(text：当前值,row：当前整条数据 ,index：当前行)	function	-
----slotName	插槽显示此列数据（其值是具名作用域插槽）	String	-
------scope	具名插槽获取此行数据必须用解构接收	Object	当前行数据
keywords	关键字配置（value-key 配置）	Object	无
------label	选项的标签	String	‘label’
------value	选项的值	String / number	‘value’
radioTxt	单选文案	String	单选
multiple	是否开启多选	Boolean	false
filterMethod	自定义过滤	function	-
rowClickRadio	是否开启整行选中(单选)	boolean	true
isShowFirstColumn	是否显示首列(单选)	boolean	true
defaultSelectVal	设置第一页默认选中项--keywords.value 值	Array	[]
filterable	是否开启过滤(根据 keywords 的 label 值进行过滤)	Boolean	true
reserveSelection	是否支持翻页选中	Boolean	true
isShowPagination	开启分页	Boolean	false
tableWidth	table 宽度(单位：px) 若设置 0，宽度 100%	Number/String	550
selectWidth	select 宽度(单位：px) 若设置 0，宽度 100%	Number/String	550
inputWidth	input 输入框的宽度(单位：px) 若设置 0，宽度 100%	Number/String	550
inputAttr	继承所有 el-input 的属性	Object	-
isKeyup	单选是否开启键盘事件	Boolean	false
isShowQuery	是否允许配置查询条件(继承 TQueryCondition 的所有属性、事件、插槽)	Boolean	false
isShowBlurBtn	条件查询组件是否显示隐藏下拉框按钮	Boolean	false
btnBind	显示下拉框按钮配置，继承el-button所有属性;默认值{type:'danger',btnTxt:'关闭下拉框'}	Object	-
isClearQuery	关闭下拉框是否清空搜索条件	Boolean	false
selfExpanded	是否始终显示下拉框	Boolean	false
isExpanded	是否显示下拉框	Boolean	false
toolbar	el-table 头部插槽（位置：查询条件下面）	slot	-
footer	el-table 底部插槽（位置：分页器下面）	slot	-
multipleFixed1.4.13	table 是否固定多选	Boolean	true
radioFixed1.4.13	table 是否固定单选	Boolean	true
useVirtual1.4.13	table 是否开启虚拟滚动	Boolean	false
virtualShowSize1.4.13	虚拟列表的渲染行数	Number	30
multipleDisableDelete1.4.14	多选--之前选中的数据不在新数据源下，是否隐藏tag删除icon	Boolean	true
defaultValIsOpenRadioChange1.4.14	默认赋值--是否开启单选事件	Boolean	false
radioSameIsCancel1.4.15	单选选中同一条数据，是否取消选中	Boolean	true
border1.4.15	下拉表格是否显示边框	Boolean	true
tableSize1.4.15	下拉表格大小可选值：large、default、small	String	''
radioSelectValLabel1.4.16	单选回显label需要动态配置defaultSelectVal 才有选中效果	String	-
isRadioEchoLabel1.4.16	单选--是否开启回显label	Boolean	true
remote1.4.16	是否开启远程搜索	Boolean	false
remoteMethod1.4.16	自定义远程搜索方法	Function	搜索输入的值
tableLoading1.5.1	table loading	Boolean	false
loadingText1.5.1	table loading 文字	String	'加载中...'

3、事件（events）继承 el-table 及 el-select 属性

事件名	说明	回调参数
page-change	页码改变事件(避免与 el-table 的 current-change 事件冲突)	返回选中的页码
selectionChange	多选事件	返回选中的项数据及选中项的 keywords.value 集合
radioChange	单选	返回当前项所有数据
input-focus	输入框聚焦	-
input-blur	输入框失焦	-
input-click	输入框点击	-
input-clear	输入框清空	-

4、Expose 方法（Methods）

方法名	说明
clear	清空选中项
focus	使 input 获取焦点
blur	使 input 失去焦点，并隐藏下拉框
tQueryConditionRef	条件查询组件实例
selectRef	下拉选择实例
selectTable	el-table 实例
state	组件内定义的参数对象