DataTable 数据表格

基于Table组件封装的表格组件,采用columns配置列,让table可以数据化驱动。

提示

组件会透传Table组件支持的所有属性和事件绑定,部分属性设置了默认值,你可以选择覆盖。 组件放弃了插槽的透传,毕竟组件的目的是数据化驱动Table,而插槽写法会妨碍数据化,需要插槽定制的需求可以通过传入组件实现(组件也是数据的一种)。

基础用法

只需要columns就可以渲染出表格,传入data即可显示数据。

配置原始Table组件的各项参数

说明

如无特殊说明,组件支持透传Table组件的所有方法和绝大部分参数,columns配置项支持TableColumn组件的绝大部分属性。插槽请按本组件文档描述使用。

本例设置了Table组件size,高度,配置了TableColumn组件的formatter, type数据,监听了Table组件的selection-change事件。可调用Table实例的方法

空格填充

自带多(单)选数值绑定

多选功能是基于Table组件的多选实现,单选是组件内部实现。 多选值绑定支持翻页表格,通过选择列对象的reserveSelection属性实现。 单选值可以通过维护分页和选择值来实现页内单选,具体见示例代码。

基础操作按钮

本例同时也演示了如何利用计算属性来动态设置columns属性

操作按钮异步请求和表格列自定义组件渲染

提示

Table组件文档参照

Attributes

参数类型说明可选值默认值
columnsobject[]列配置项(column)的数组,具体参数见column----
set-empty-cellboolean /
Function(result, row,column,cellValue,index)
是否需要将空单元格设置成'--',也可以传入函数来自己决定怎么处理空单元格。
第一个参数为cellValue/formatter(如果设置了)处理结果,余下的和TableColumn组件的formatter一致
----
selection-keystring /
Function(row)
行数据的Key,指定选择组件绑定值。也可以使用函数。功能和Table组件的row-key类似,缺省时会尝试使用row-key的值。----
selection-valuenumber/ string/ number[] / string[]多(单)选择列的同步值,支持.sync修饰符。多选时必须为数组----

Methods

组件代理了Table组件的所有方法,具体见Table文档

column

参数类型说明可选值默认值
keystring渲染列组件时使用的key属性, 默认使用prop属性, 如果列对象没有prop属性,会使用列在数组中的索引作为key----
hideboolean/Function()是否隐藏(不渲染)当前列,可以为boolean类型值,也可以用函数动态控制。----
scopeSlotstring(ComponentName)
/Component
列的作用域插槽内渲染的组件,会传入column和scope两个props参数。----
actionobject[]操作按钮数组,设置此值时会使用内部操作按钮组件传递给scopeSlot来生成按钮。操作按钮采用ActionBtns组件生成,函数参数见下文说明。组件具见ActionBtns----
selectionstring是否使用单(多)选择列,设置此值时会使用内部组件传递给scopeSlot来生成选择列(而非Table自带选择列)。使用selectionValue.sync来同步数据。radio / checkbox--
notUseScopeSlotboolean是否不使用作用域插槽,即使设置了scopeSlot。可用于在文本和作用域插槽间切换----

column参数说明

参数优先级关系:scopeSlot > action > selection

action按钮项的涉及到的函数的参数Function(row, btn, scope),分别是当前行数据,当前点击按钮对象,当前行scope对象(包含row, column, $index等)

columns性能分析

column列对象的key属性可用于组件性能优化。当columns对象属性可能发送变化时,存在如下情形。

  • 如果所有列都是固定的也不存在显示隐藏,那么是否设置key或列是否有prop属性没有影响。
  • 如果所有列都是固定的但有列会切换显示隐藏,那么不设置key时,是否会有影响取决于是否设置了prop。原因,如果没有keyprop,列组件会使用index作为key,index会因为显示隐藏发生变化。还有可能因为组件复用导致渲染出错。
  • 如果列不固定且有切换显示隐藏。那么index无法保障有效的顺序。这种情况下列至少需要设置propkey其中之一作为key。
  • 最后是最少见的场景,即需要在让columns发生变化时所有列都强制重新渲染,这时候可以利用计算属性设置每列的key值为随机值。

Table Attributes

仅列举原组件受影响的字段,其他字段见原组件文档。

参数能否覆盖默认值说明
bordertrue个人感觉,有边框视觉更舒适
stripetrue斑马纹,yes!
Last Updated:
Contributors: wxhccc, wxhccche