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 | 是否输入框显示 | 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 | false |
radioFixed1.4.13 | table 是否固定单选 | Boolean | false |
useVirtual1.4.13 | table 是否开启虚拟滚动 | Boolean | false |
virtualShowSize1.4.13 | 虚拟列表的渲染行数 | Number | 30 |
multipleDisableDelete1.4.14 | 多选--之前选中的数据不在新数据源下,是否隐藏tag 删除icon | Boolean | false |
defaultValIsOpenRadioChange1.4.14 | 默认赋值--是否开启单选事件 | Boolean | false |
radioSameIsCancel1.4.15 | 单选选中同一条数据,是否取消选中 | Boolean | true |
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 实例 |