TuiPlus基础组件文档

Appearance

On this page

下拉选择表格组件 ​

单选 ​

是否显示下拉框 ​

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

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

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

不显示首列单选 ​

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

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

单选（默认选中） ​

多选（默认选中） ​

多选 ​

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

显示查询条件 ​

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

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

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

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仅显示
table表格数据对象Object{}
---data展示下拉数据源Array[]
---total数据总条数Number-
---pageSize每页显示条目个数Number-
---currentPage当前页数Number-
columns表头信息Array[]
----bindel-table-column AttributesObject-
----noShowTip是否换行 （设置：noShowTip:true）Booleanfalse
----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
isKeyup单选是否开启键盘事件Booleanfalse
isShowQuery是否允许配置查询条件(继承TQueryCondition的所有属性、事件、插槽)Booleanfalse
isShowBlurBtn条件查询组件是否显示隐藏下拉框按钮Booleanfalse
btnBind显示下拉框按钮配置，继承el-button所有属性;默认值{type:'danger',btnTxt:'关闭下拉框'}Object-
isClearQuery关闭下拉框是否清空搜索条件Booleanfalse
selfExpanded是否始终显示下拉框Booleanfalse
isExpanded是否显示下拉框Booleanfalse

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

事件名说明回调参数
page-change页码改变事件(避免与el-table的current-change事件冲突)返回选中的页码
selectionChange多选事件返回选中的项数据及选中项的 keywords.value 集合
radioChange单选返回当前项所有数据

4、Expose 方法（Methods） ​

方法名说明回调参数
clear清空选中项
focus使 input 获取焦点
blur使 input 失去焦点，并隐藏下拉框
tQueryConditionRef条件查询组件实例
selectRef下拉选择实例
selectTableel-table实例