Skip to content
On this page

TTable 表格

用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作。

基础用法

表头样式修改

斑马线表格

表格loading

边框表格--table数据方式

边框表格--TTable标签方式

表格大小

对齐方式

基本表尾合计

自定义表尾合计

常规排序

指定数据排序

特定项远程排序

自定义排序规则

复选框表格

复选框表格--翻页选中功能selectionDisabled

复选框表格--禁用功能

表格--筛选功能

单选框表格

单选框--默认选中项及开启点击整行选中

单选框--禁用

序列号表格

第一列显示复选框和序列号

第一列显示单选框和序列号

Table empty插槽使用1.4.15

Table empty-text使用

双击单元格复制(默认不开启)

集成分页器

分页器-设置 layout 自定义插槽使用

字典过滤渲染

某列 render 渲染

某列 作用域插槽渲染

自定义表头渲染

列--动态显示隐藏且拖动排序

行--拖拽排序

表头合并单元格(多级表头)

表头合并(多级表头)-插槽使用

多级表头--单元格编辑

表格操作按钮

自定义操作按钮样式

操作按钮 render 方式

操作按钮插槽方式

Tree-Table

超级 TreTable 使用

单元格编辑功能

单元格单独编辑

单元格编辑--键盘事件

单元格编辑--使用组件事件

单元格编辑--校验 rules

单元格编辑--TSelectTable 校验 rules

单元格编辑-- 回显TSelectTable

单元格编辑--底部按钮插槽使用

展开行

TTable 参数配置


1、代码示例

html
<t-table
  :table="table"
  :columns="table.columns"
  @size-change="handlesSizeChange"
  @page-change="handlesCurrentChange"
/>
<t-table
  :table="table"
  :columns="table.columns"
  @size-change="handlesSizeChange"
  @page-change="handlesCurrentChange"
/>

2、配置参数(Table Attributes)

参数说明类型默认值
table表格数据对象Object{}
---layout分页组件布局参考String'total,sizes, prev, pager, next, jumper'
---rules规则(可依据 elementPlus el-form 配置————对应 columns 的 prop 值)Object-
---border是否开启边框线Booleanfalse
---data展示数据Array[]
---toolbar表格外操作栏选中表格某行,可以将其数据传出Array[]
---operator表格内操作栏数据Array[]
-------hasPermi表格内操作栏按钮权限资源(必须传btnPermissions属性才生效)String-
-------show表格内操作栏根据状态显示Object-
-------renderrender 函数渲染使用的 Function(val) 可以用 tsx 方式Function-
-------noshow表格内操作栏根据多种状态不显示Array-
-------bind继承 el-button 所有 AttributesObject-
-------fun事件名function-
---operatorConfig表格内操作栏样式Object-
--------fixed列是否固定在左侧或者右侧。 true 表示固定在左侧(true / 'left' / 'right')string / boolean-
--------label显示的标题string'操作'
--------width对应列的宽度(固定的)string / number-
--------minWidth对应列的最小宽度(会把剩余宽度按比例分配给设置了 min-width 的列)string / number-
--------align对齐方式 (left / center / right)string'center'
--------bindel-table-column AttributesObject-
---firstColumn表格首列(序号 index,复选框 selection,单选 radio,展开行 expand)排列object/Array-
---total数据总条数Number-
---pageSize页数量Number-
---currentPage是否需要显示切换页条数Number-
columns表头信息Array[]
----sort排序 (设置:sort:true)Booleanfalse
----sortable排序,若设置为 'custom',需要监听 Table 的 sort-change 事件Boolean /stringfalse
----align对齐方式 (left / center / right)string'center'
----renderHeader列标题 Label 区域渲染使用的 Function(val) 可以用 jsx 方式Function-
----render某列 render 函数渲染使用的 Function(val) 可以用 jsx 方式Function-
----bindel-table-column AttributesObject-
----width对应列的宽度(固定的)string / number-
----minWidth对应列的最小宽度(会把剩余宽度按比例分配给设置了 min-width 的列)string / number-
----slotName插槽显示此列数据(其值是具名作用域插槽String-
----isShowHidden是否动态显示隐藏列设置(隐藏/显示列)Booleanfalse
----slotNameMerge合并表头插槽显示此列数据(其值是具名作用域插槽)String-
----------scope具名插槽获取此行数据必须用解构接收{scope}.row 是当前行数据 }Object-
----canEdit是否开启单元格编辑功能Booleanfalse
----configEdit表格编辑配置(开启编辑功能有效)Object-
----------rules规则(可依据 elementPlus el-form 配置————对应 columns 的 prop 值)Object-
----------labelplaceholder 显示String-
----------editComponent组件名称可直接指定全局注册的组件,也可引入'element'如:'el-input'String/component-
----------eventHandle第三方 UI 的 事件(返回三个参数,需解构获取{val,prop,scope})Object-
----------bind第三方 UI 的 Attributes,(Function返回值scope)Object/Function-
----------event触发 handleEvent 事件的标志String-
----------type下拉或者复选框显示(select-arr/select-obj/checkbox)String-
----------list下拉选择数据源名称String-
----------arrLabeltype:select-arr/radio/checkbox 时对应显示的中文字段Stringlabel
----------arrKeytype:select-arr/radio/checkbox 时对应显示的数字字段Stringkey
----filters字典过滤Object-
----------listlistTypeInfo 里面对应的下拉数据源命名String-
----------key数据源的 key 字段String'value'
----------label数据源的 label 字段String'label'
btnPermissions按钮权限数据集(后台返回的按钮权限集合)Array-
listTypeInfo下拉选择数据源Object-
footer底部操作区(默认隐藏,使用插槽展示“保存”按钮)slot-
pagination分页器自定义内容 设置文案(table 设置 layout 才生效)slot-
isKeyup单元格编辑是否开启键盘事件Booleanfalse
isShowFooterBtn是否显示保存按钮Booleanfalse
title表格左上标题String /slot-
tableTitle表格左上标题(为解决顶层容器会出现原生的 title 属性)同时存在优先展示插槽String /slot-
isShowPagination是否显示分页(默认显示分页)Booleantrue
isPaginationCumulative序列号显示是否分页累加Booleanfalse
isCopy是否允许双击单元格复制Booleanfalse
defaultRadioCol设置默认选中项(单选)defaultRadioCol 值必须大于 0!Number-
rowClickRadio是否开启点击整行选中单选框Booleantrue
columnSetting是否显示设置(隐藏/显示列)Booleanfalse
name开启列拖拽,缓存唯一性标识(如果没有设置name取title或tableTitle)String-
isRowSort是否开启行拖拽(row-key 需要设置)Booleanfalse
isTree是否开启 Tree-table 样式Booleanfalse
columnSetBind列设置按钮配置(继承el-button所有属性)Object-
----btnTxt按钮显示文字String'列设置'
----title点击按钮下拉显示 titleString'列设置'
----isShowTitle点击按钮下拉是否显示 titleBooleantrue
----sizeel-button 的 sizeString'default'
----iconel-button 的 iconString'Setting'
aligntable 对齐方式 可选值leftcenterrightString'center'
isSlotToolbarTAdaptivePage 组件是否使用了 Toolbar 插槽Booleanfalse
isSlotTitleTAdaptivePage 组件是否使用了 title 插槽Boolean-
sortable设置为 'custom',需要监听 Table 的 sort-change 事件Boolean/string-
border1.4.12是否开启边框线Booleanfalse
tableLoading1.4.12table loadingBooleanfalse
loadingTxt1.4.12table loading文字提示string加载中...
useVirtual1.4.13table 是否开启虚拟滚动Booleanfalse
virtualShowSize1.4.13虚拟列表的渲染行数Number30
footerBtnAlign1.4.14TTable底部插槽操作布局方式有三个值(left center rightString'right'

3、events 其他事件按照 el-table 直接使用(如 sort-change 排序事件)

事件名说明返回值
page-change当前页码当前选中的页码
save保存按钮编辑后的所有数据
handleEvent单个输入触发事件configEdit 中的 event 值和对应输入的 value 值
radioChange单选选中事件返回当前选中的整行数据
rowSort行拖拽排序后触发事件返回排序后的 table 数据
validateError单元格编辑保存校验不通过触发返回校验不通过的 prop--label 集合

4、Methods 方法 继承 el-table 所有方法(Expose)

事件名说明返回值
saveMethod单元格编辑保存方法callback(tableData)
resetFields对表单进行重置,并移除校验结果(单元格编辑时生效)
clearValidate清空校验规则(单元格编辑时生效)-
defaultRadioSelect单选默认选中--且只能默认选中第一页的数据--传入值必须大于等于 1-
reSetColumnSet开启columnSetting,调用此方法columnSet显示修改后缓存数据-
clearRadioHandle1.4.14清除单选框选中状态-

5、Slots 插槽

插槽名说明参数
titleTTable 左侧 Title-
titleTipTTable 头部 tip-
toolbarTTable 右侧 toolbar-
expandtable.firstColumn.type:expand 展开行插槽scope
-el-table-column 某列自定义插槽(slotName 命名)scope
-el-table-column 单元格编辑插槽(editSlotName 命名)scope
-el-table-column 表头合并插槽(slotNameMerge 命名)scope
-操作列前一列自定义默认内容插槽-
footer底部操作区具名插槽需要设置isShowFooterBtn-
pagination分页器自定义内容 设置文案(table 设置 layout 才生效)-