# Table 表格 UPDATE

用于数据的展示，可对数据进行排序、筛选、对比、自定义操作等复杂行为。

# 代码演示

国际化（多语言）

1、超出两行显示省略号 2、以字母省略 3、以单词换行（允许字母换行） 4、鼠标悬浮：考虑到性能问题，悬浮可以用原生 title 支持

Vue.use(WinDesign, { i18nOverflow: true })

同时也可以在单个表格或者单个列中关闭多语言规范配置

<w-table :i18n-overflow="false"></w-table>

<w-table-column :i18n-overflow="false"></w-table-column>

1
2
3

# API

# Table Attributes

参数	说明	类型	可选值	默认值	Version
draggable-class	确定要使用拖拽排序的表格	String		#app	V2.2.9
draggable-row	开启行拖拽	Boolean	true/false	-	V2.2.9
draggable-column	开启列拖拽	Boolean	true/false	-	V2.2.9
draggable-selection	开启列拖拽时是否显示选中	Boolean	true/false	-	V2.2.9
draggable-expand	开启列拖拽时是否显示展开/收起列	Boolean	true/false	-	V2.2.14
draggable-other-columns	开启列拖拽时除了复选框还有哪些需要固定在左侧且禁止拖拽的列数量	Number	-		V2.2.14
draggable-column-data	列拖拽列表	Array	-		V2.2.9
border	是否带有纵向边框	Boolean	—	false
hover	是否悬浮行的时候显示背景色	Boolean	—	true	V2.3.7
strong-hover	是否悬浮行的时候显示外层线框色	Boolean	—	false	V2.4.45
correct-hover	是否纠正合并列下鼠标悬浮背景色错乱的问题(没有默认纠正，是为了兼容开发者已经在项目中自行修复)	Boolean	—	false	V2.4.14
current-row-key	当前行的 key，只写属性	String,Number	—	—
cell-class-name	单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。	Function({row, column, rowIndex, columnIndex}) \| String	—	—
cell-style	单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。	Function({row, column, rowIndex, columnIndex}) \| Object	—	—
data	显示的数据	Array	—	—
default-expand-all	是否默认展开所有行，只有当 table 存在展开行或者为树形结构表格时生效	Boolean	—	false
default-sort	默认的排序列的 prop 和顺序。它的`prop`属性指定默认的排序的列，`order`指定默认排序的顺序	Object	`order`: ascending, descending	如果只指定了`prop`, 没有指定`order`, 则默认顺序是 ascending
empty-text	空数据时显示的文本内容，也可以通过 `slot="empty"` 设置	String	—	暂无数据
max-height	Table 的最大高度。合法的值为数字或者单位为 px 的高度。	String \| Number	—	—
expand-row-keys	可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。	Array	—
fit	列的宽度是否自撑开	Boolean	—	true
height	Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 String 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。	String \| Number	—	—
highlight-current-row	是否要高亮当前行	Boolean	—	false
highlight-selection-row	是否要高亮复选框选中行（仅针对开启 `selection` 有效）	boolean	—	false	V2.4.37
header-row-class-name	表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。	Function({row, rowIndex}) \| String	—	—
header-row-style	表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。	Function({row, rowIndex}) \| Object	—	—
header-cell-class-name	表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。	Function({row, column, rowIndex, columnIndex}) \| String	—	—
header-cell-style	表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。	Function({row, column, rowIndex, columnIndex}) \| Object	—	—
indent	树形 table 中树节点的缩进距离	Number	—	16	v1.7.0
lazy	是否懒加载子节点数据	Boolean	—	—	v1.7.0
load	树形 table 中，用于加载子节点数据的函数，仅当 lazy 为 true 时生效	Function(row, treeNode, resolve)	—	—	v1.7.0
lower-threshold	距 table 底部多少距离时（单位 px），触发 scrollToLower 事件	Number	—	0	v2.0.9
row-class-name	行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。	Function({row, rowIndex}) \| String	—	—
row-style	行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。	Function({row, rowIndex}) \| Object	—	—
row-key	行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形结构数据时，该属性是必填的。类型为 String 时，支持多层访问：`user.info.id`，但不支持 `user.info[0].id`，此种情况请使用 `Function`。	Function(row) \| String	—	—
show-header	是否显示表头	Boolean	—	true
scrollbar-width	指定滚动条宽度（可在自定义滚动条宽度的情况下，gutter 宽度计算失败时使用）	Number	—	—	v2.4.40
size	Table 的尺寸	String	'medium' \| 'small' \| 'mini'	—
stripe	是否为斑马纹 table	Boolean	—	false
show-summary	是否在表尾显示合计行	Boolean	—	false
sum-text	合计行第一列的文本	String	—	合计
summary-method	自定义的合计计算方法	Function({ columns, data })	—	—
span-method	合并行或列的计算方法	Function({ row, column, rowIndex, columnIndex })	—	—
select-on-indeterminate	在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行	Boolean	—	true
sticky-header	表头是否吸顶	Boolean	—	false	v2.0.9
sticky-top-offset	表头距 window 顶部边缘的高度	Number	—	0	v2.0.9
sticky-footer	汇总区域是否悬浮在底部	Boolean	—	false	v2.0.9
sticky-bottom-offset	汇总区域距 window 底部边缘的高度	Number	—	0	v2.0.9
tree-props	渲染树形结构数据的配置选项	Object	—	{ hasChildren: 'hasChildren', children: 'children' }	v1.7.0
tree-expand-icon	自定义树形结构数据展开折叠 icon	String[]	—	[unexpendedIcon, expendedIcon]	v2.0.0
show-connection	是否展示树形结构数据根节点连接线	Boolean	—	false	v2.4.32
tooltip-effect	tooltip `theme` 属性	String	'dark' \| 'light'	—
tooltip-max-width	tooltip `max-width` 属性	String	—	400px	V2.2.9
upper-threshold	距 table 顶部多少距离时（单位 px），触发 scroll-to-upper 事件	Number	—	0	v2.0.9
horizontal-scroll	是否开启底部模拟横向滚动条	Boolean	—	false	v2.3.9
horizontal-scroll-always	底部滚动条是否一直显示	Boolean	—	true	v2.3.9
strictly-none-border	没有任何线条的表格	Boolean	—	false	v2.4.10
empty	是否在空数据的时候显示占位符	Boolean	—	false	v2.4.15
empty-type	占位符类型(参考 Empty 空状态	String	—	'empty'	v2.4.21
footer-row-class-name	表尾行的 className 的回调方法，也可以使用字符串为所有表尾行设置一个固定的 className。	Function({rowIndex}) \| String	—	—	V2.4.27
footer-row-style	表尾行的 style 的回调方法，也可以使用一个固定的 Object 为所有表尾行设置一样的 Style。	Function({rowIndex}) \| Object	—	—	V2.4.27
footer-cell-class-name	表尾单元格的 className 的回调方法，也可以使用字符串为所有表尾单元格设置一个固定的 className。	Function({row, column, rowIndex, columnIndex}) \| String	—	—	V2.4.27
footer-cell-style	表尾单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表尾单元格设置一样的 Style。	Function({row, column, rowIndex, columnIndex}) \| Object	—	—	V2.4.27
autoTooltipWidth	是否在文本较长时关闭 tooltip-max-width	false	—	—	V2.4.37
header-span-method	表头合并列的计算方法	Function({ rowIndex,columnIndex,column })	—	—	V2.4.38
header-sticky-position	固定按钮的位置	String	start、end	end	V2.4.40
header-sticky-offset	固定按钮的便宜距离	Number	-	0	V2.4.40
header-sticky-shadow	固定按钮的阴影	Boolean	-	true	V2.4.40
invert-current-row	在单选时是否开启反选	Boolean	-	false	V2.4.43
row-sticky	行吸顶的计算方法	Function({ row, rowIndex })	—	—	V2.4.44
ctrl-or-shift-check	按住 Ctrl (Windows) 或 Cmd (Mac) 点击行多选、按住 Shift 点击行连选	Boolean	—	—	V2.4.51

# Table Events

事件名	说明	参数	Version
row-drag-start	行拖拽开始时触发	{ oldIndex }	v2.2.9
row-drag-end	行拖拽结束时触发	data, { newIndex, oldIndex }	v2.2.9
column-drag-move	列拖拽发	event	v2.2.9
column-drag-end	列拖拽结束时触发	data, { oldIndex, newIndex }	v2.2.9
cell-mouse-enter	当单元格 hover 进入时会触发该事件	row, column, cell, event
cell-mouse-leave	当单元格 hover 退出时会触发该事件	row, column, cell, event
cell-click	当某个单元格被点击时会触发该事件	row, column, cell, event
cell-dblclick	当某个单元格被双击击时会触发该事件	row, column, cell, event
current-change	当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性	currentRow, oldCurrentRow
expand-change	当用户对某一行展开或者关闭的时候会触发该事件(第二个参数存在 2 种回调结果，当展开行时返回的是 expandedRows, 树形结构数据展开时是 expanded)	row, (expandedRows \| expanded)	v1.7.0
filter-change	当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。	filters
header-click	当某一列的表头被点击时会触发该事件	column, event
header-contextmenu	当某一列的表头被鼠标右键点击时触发该事件	column, event
header-dragend	当拖动表头改变了列的宽度的时候会触发该事件	newWidth, oldWidth, column, event
row-click	当某一行被点击时会触发该事件	row, column, event, rowIndex	V2.4.5
row-contextmenu	当某一行被鼠标右键点击时会触发该事件	row, event, rowIndex	V2.4.5
row-dblclick	当某一行被双击时会触发该事件	row, event, rowIndex	V2.4.5
select	当用户手动勾选数据行的 Checkbox 时触发的事件	selection, row
select-all	当用户手动勾选全选 Checkbox 时触发的事件	selection
selection-change	当选择项发生变化时会触发该事件	selection
sort-change	当表格的排序条件发生变化的时候会触发该事件	{ column, prop, order }
scroll-to-upper	纵向滚动到 table 顶部时触发	event	v2.0.9
scroll-to-lower	纵向滚动到 table 底部时触发	event	v2.0.9
summary-row-click	当表尾被点击时会触发该事件	row, column, event, index	V2.4.10
summary-row-contextmenu	当表尾被鼠标右键点击时会触发该事件	row, column, event, index	V2.4.10
summary-row-dblclick	当表尾被双击时会触发该事件	row, column, event, index	V2.4.10

# Table Methods

方法名	说明	参数
clearSelection	用于多选表格，清空用户的选择	—
clearSort	用于清空排序条件，数据会恢复成未排序的状态	—
clearFilter	不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由 columnKey 组成的数组以清除指定列的过滤条件	columnKey
doLayout	对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法	—
setCurrentRow	用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。	row
sort	手动对 Table 进行排序。参数`prop`属性指定排序列，`order`指定排序顺序。	prop: String, order: String
toggleRowSelection	用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）	row, selected
toggleAllSelection	用于多选表格，切换所有行的选中状态	—
toggleRowExpansion	用于可展开表格与树形结构表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）	row, expanded

# Table Slot

name	说明	Version
append	插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。
header-sticky	插入右侧设置按钮	V2.4.37

# Table-column Attributes

参数	说明	类型	可选值	默认值	Version
align	对齐方式	String	'left' \| 'center' \| 'right'	'left'
column-key	column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件	String	—	—
class-name	列的 className	String	—	—
expand-icon	收起与展开的触发图标	Array	[unexpendedIcon, expendedIcon]	v2.0.9
formatter	用来格式化内容	Function(row, column, cellValue, index)	—	—
fixed	列是否固定在左侧或者右侧，true 表示固定在左侧	String, Boolean	true \| 'left' \| 'right'	—
filters	数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。	Array[{ text, value }]	—	—
filter-placement	过滤弹出框的定位	String	与 Tooltip 的 `placement` 属性相同	—
filter-multiple	数据过滤的选项是否多选	Boolean	—	true
filter-method	数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。	Function(value, row, column)	—	—
filtered-value	选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。	Array	—	—
header-align	表头对齐方式，若不设置该项，则使用表格的对齐方式	String	'left' \| 'center' \| 'right'	—
index	如果设置了 `type=index`，可以通过传递 `index` 属性来自定义索引	number, Function(index)	—	—
label	显示的标题	String	—	—
label-class-name	当前列标题的自定义类名	String	—	—
line-clamp	多行溢出行数(适用于行数大于 1 行的多行文本溢出样式控制需求, -webkit-line-clamp 存在兼容性问题, 仅 Chrome 内核浏览器兼容良好, 请谨慎使用)	Number	—	—	v2.0.12
min-width	对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列	String	—	—
prop	对应列内容的字段名，也可以使用 property 属性	String	—	—
resizable	对应列是否可以通过拖动改变宽度（需要在 w-table 上设置 border 属性为真）	Boolean	—	true
render-header	列标题 Label 区域渲染使用的 Function	Function(h, { column, $index })	—	—
reserve-selection	仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 `row-key`）	Boolean	—	false
show-overflow-tooltip	当内容过长被隐藏时显示 tooltip	Boolean	—	false
sort-method	对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致	Function(a, b)	—	—
sort-by	指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推	String/Array/Function(row, index)	—	—
sort-orders	数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序	Array	数组中的元素需为以下三者之一：`ascending` 表示升序，`descending` 表示降序，`null` 表示还原为原始顺序	['ascending', 'descending', null]
sortable	对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件	Boolean, String	true \| false \| 'custom'	false
selectable	仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选	Function(row, index)	—	—
type	对应列的类型。如果设置了 `selection` 则显示多选框；如果设置了 `index` 则显示该行的索引（从 1 开始计算）；如果设置了 `expand` 则显示为一个可展开的按钮	String	'selection' \| 'index' \| 'expand'	—
width	对应列的宽度	String	—	—
settings	列的配置数据	Array	—	—	V2.4.1
required	列的必填标志	Boolean	—	—	V2.4.10
filter-icon	自定义筛选按钮	String	—	—	V2.4.27
overflow-tooltip-format	自定义悬浮框内容	Function(row)	—	—	V2.4.38
ctrl-or-shift-check	按住 Ctrl (Windows) 或 Cmd (Mac) 点击行多选、按住 Shift 点击行连选	Boolean	—	—	V2.4.51

# Table-column Scoped Slot

name	说明	Version
—	自定义列的内容，参数为 { row, column, $index }
header	自定义表头的内容. 参数为 { column, $index }

# 常见问题

1、缩放浏览器窗口报错：ResizeObserver loop completed with undelivered notifications

 // vue.config.js

devServer: {
  client: {
      overlay: {
        warnings: false,
        runtimeErrors: (error) => {
          const ignoreErrors = [
            'ResizeObserver loop limit exceeded',
            'ResizeObserver loop completed with undelivered notifications.',
          ];
          if (ignoreErrors.includes(error.message)) {
            return false;
          }
        },
      },
    },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2、切换页面或模块表格出现错乱

this.$refs.table.doLayout()

3、自定义表头遇到数据不能更新等问题

1、slot="header" 是具名插槽，它占了这里的位置，this 指向 data, 但是 data 更新的时候，占位这个操作并不会再次重新占位，里面的数据并不会随着 data 更新；

2、slot-scope="scope" 是作用域插槽，在这个作用域内， this 指向 scope

3、slot="header" slot-scope="scope" 指向 data 里的数据，所以会随着 data 更新

<template slot="header" slot-scope="scope">
  // 代码
</template>

1
2
3

补充说明： 如果当前项目使用了 ESLint 插件，template 里并没有用到 slot-scope="scope" 中的 scope 而报错，可以简写具名插槽如：slot="header" 改成 #header 。

4、表格中输入框无法聚焦

<w-table-column>
  <template slot-scope="{row, column}">
    <w-input :id="'自定义' + row.index + column.index"></w-input>
  </template>
</w-table-column>

<script>
  export default {
    data() {
      return {
        clickRowIndex: null, // 当前点击的行索引
        clickCellIndex: null, // 当前点击的列索引
      }
    },
    methods: {
      handleFocus() {
        this.$nextTick(() => {
          const target = document.getElementById(
            '自定义' + this.clickRowIndex + this.clickCellIndex
          )
          if (target) {
            target.focus();
          }
        });
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28