Skip to content
On this page

TSelectTable 下拉选择表格组件

注意

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

单选

单选--禁用

多选--禁用复选框

是否显示下拉框

单选 -- 开启键盘事件(上下选择高亮,回车选中)

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

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

不显示首列单选

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

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

单选(默认选中)

多选(默认选中)

多选

开启分页功能(支持翻页选中且默认开启)

是否隐藏删除icon1.4.14

显示查询条件

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

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

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

下拉框插槽使用

input 框显示

TSelectTable 参数配置


1、代码示例

html
<t-select-table
  :table="table"
  :columns="table.columns"
  :max-height="400"
  :keywords="{ label: 'name', value: 'id' }"
  @radioChange="radioChange"
></t-select-table>
<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绑定值boolean / string / number仅显示
v-model:input-value输入框回显值boolean / string / number-
isShowInput是否输入框显示Booleanfalse
table表格数据对象Object{}
---data展示下拉数据源Array[]
---total数据总条数Number-
---pageSize每页显示条目个数Number-
---currentPage当前页数Number-
columns表头信息Array[]
----bindel-table-column AttributesObject-
----fixed列是否固定( left, right)string, boolean-
----align对齐方式(left/center/right)Stringcenter
----render返回三个参数(text:当前值,row:当前整条数据 ,index:当前行)function-
----slotName插槽显示此列数据(其值是具名作用域插槽)String-
------scope具名插槽获取此行数据必须用解构接收Object当前行数据
keywords关键字配置(value-key 配置)Object
------label选项的标签String‘label’
------value选项的值String / number‘value’
radioTxt单选文案String单选
multiple是否开启多选Booleanfalse
filterMethod自定义过滤function-
rowClickRadio是否开启整行选中(单选)booleantrue
isShowFirstColumn是否显示首列(单选)booleantrue
defaultSelectVal设置第一页默认选中项--keywords.value 值Array[]
filterable是否开启过滤(根据 keywords 的 label 值进行过滤)Booleantrue
reserveSelection是否支持翻页选中Booleantrue
isShowPagination开启分页Booleanfalse
tableWidthtable 宽度(单位:px) 若设置 0,宽度 100%Number/String550
selectWidthselect 宽度(单位:px) 若设置 0,宽度 100%Number/String550
inputWidthinput 输入框的宽度(单位:px) 若设置 0,宽度 100%Number/String550
inputAttr继承所有 el-input 的属性Object-
isKeyup单选是否开启键盘事件Booleanfalse
isShowQuery是否允许配置查询条件(继承 TQueryCondition 的所有属性、事件、插槽)Booleanfalse
isShowBlurBtn条件查询组件是否显示隐藏下拉框按钮Booleanfalse
btnBind显示下拉框按钮配置,继承el-button所有属性;默认值{type:'danger',btnTxt:'关闭下拉框'}Object-
isClearQuery关闭下拉框是否清空搜索条件Booleanfalse
selfExpanded是否始终显示下拉框Booleanfalse
isExpanded是否显示下拉框Booleanfalse
toolbarel-table 头部插槽(位置:查询条件下面)slot-
footerel-table 底部插槽(位置:分页器上面)slot-
multipleFixed1.4.13table 是否固定多选Booleanfalse
radioFixed1.4.13table 是否固定单选Booleanfalse
useVirtual1.4.13table 是否开启虚拟滚动Booleanfalse
virtualShowSize1.4.13虚拟列表的渲染行数Number30
multipleDisableDelete1.4.14多选--之前选中的数据不在新数据源下,是否隐藏tag删除iconBooleanfalse
defaultValIsOpenRadioChange1.4.14默认赋值--是否开启单选事件Booleanfalse
radioSameIsCancel1.4.15单选选中同一条数据,是否取消选中Booleantrue

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下拉选择实例
selectTableel-table 实例