【Ant Design Vue V3版本填坑记录三】一套代码实现表格常用属性
a-table 是开发中经常用到的组件，对于 V3 版本做了一些升级和修正，不熟悉的同学可以参考这篇文章的代码，搞定常用的 table attribute。
V3版本官方升级提醒：Table 废弃了 column.slots, 新增 v-slot:bodyCell、v-slot:headerCell，自定义单元格，新增 column.customFilterDropdown v-slot:customFilterDropdown，自定义筛选菜单，新增了 v-slot:customFilterIcon 自定义筛选按钮，但 column.slots 还可用（实际测试2.X版本也会出现控制台警告，上一篇文章已经说过），我们会在下一个大版本时移除。
数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址
<script setup>
import {
DownOutlined,
UserOutlined,
ToolOutlined,
StarOutlined,
StarFilled,
HeartTwoTone,
MessageOutlined,
createFromIconfontCN,
CheckOutlined,
EditOutlined
} from '@ant-design/icons-vue';
import {
message
} from 'ant-design-vue';
import {
reactive,
ref
} from 'vue';
// 设置数据的加载状态
let loading = ref(false)
// 表格列相关字段属性配置
const columns = reactive([{
dataIndex: 'tid',
title: "序号",
align: "center"
},
// columns[n] 可以内嵌 children，以渲染分组表头。
{
title: "基本信息",
children: [{
dataIndex: 'tname',
title: "姓名",
align: "center",
// responsive 响应式 breakpoint 配置列表。未设置则始终可见。 Breakpoint['xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs']
responsive: ['xxl']
}, {
dataIndex: 'tgender',
title: "性别",
align: "center",
// customRender 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引 Function({text, record, index, column}) {}
customRender: ({
text,
record,
index,
column
}) => {
// console.log(text, record, index, column)
return record.tgender === 0 ? '男' : '女'
},
// filters 表头的筛选菜单项 object[]
filters: [{
text: '男',
value: 0
}, {
text: '女',
value: 1
}, {
text: '未知',
value: -1
}]
}, {
dataIndex: 'tage',
key: 'tage',
title: "年龄",
align: "center",
width: 120,
minWidth: 120,
maxWidth: 160,
// 列排序配置项
sorter: {
// compare 配置排序逻辑的比较函数
compare: (a, b) => a.tage - b.tage,
// multiple 字段配置多列排序优先级。数值越大，优先级越高。
multiple: 2
},
// resizable 设置是否可拖动调整宽度，此时 width 必须是 number 类型。需要配合 resizeColumn 事件一起使用
resizable: true, // Tip: Vite+Vue3+Ant3 环境下，尝试不生效。
}]
},
{
dataIndex: 'tscore',
title: "成绩",
align: "center",
width: 120,
resizable: true,
// sorter 排序函数，本地排序使用一个函数(参考 Array.sort 的 compareFunction)，需要服务端排序可设为 true Function|boolean
// sorter: true,
// 列排序配置项
sorter: {
// compare 配置排序逻辑的比较函数
compare: (a, b) => a.tscore - b.tscore,
// multiple 字段配置多列排序优先级
multiple: 1
}
// sortOrder 排序的受控属性（禁用某种排序条件），可设置为 'ascend' 'descend' false
// sortOrder: 'descend'
}, {
title: "联系方式",
children: [{
dataIndex: "tphone",
title: "固定电话",
// colSpan 表头列合并（Tip：表头只支持列合并）,设置为 0 时，不渲染 number
// colSpan: 2,
// customCell 设置单元格属性 Function(record, rowIndex, column)
customCell: (record, rowIndex, column) => {
// 三个参数：当前行数据，当前行索引，当前行的column字段信息
// console.log(record, rowIndex, column)
if (rowIndex == 2) {
// 表格内容 行/列合并。当单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
return {
colSpan: 2,
rowSpan: 2
}
}
// 下面配合上面 行 合并数量的多少，去定义已被合并行 不渲染（rowSpan设值为0）
if (rowIndex == 3) {
return {
rowSpan: 0
}
}
},
}, {
title: "手机号",
dataIndex: "ttel",
// colSpan 设置为 0 时，不渲染当前表头列（配合前面合并）
// colSpan: 0,
// 下面配合上一行中对应 列 合并数量的多少，去定义已被合并 列 不渲染（colSpan 设值为 0）
customCell(record, rowIndex, column) {
// console.log(record, rowIndex, column)
if (rowIndex === 2) {
return {
colSpan: 0
}
}
if (rowIndex === 3) {
return {
colSpan: 0
}
}
}
}]
}, {
dataIndex: "tnote",
title: "备注",
width: 200,
ellipsis: true,
}, {
dataIndex: 'operation',
title: "操作",
align: "center",
width: 240,
fixed: "right"
}
])
const data = reactive([{
tid: 1,
tname: "Magnum",
tgender: 0,
tage: 23,
tscore: 38,
tphone: "010-86888888",
ttel: "13933939663",
tnote: "备注信息！备注信息！备注信息！备注信息！备注信息！备注信息！备注信息！备注信息！"
}, {
tid: 2,
tname: "梦龙",
tgender: 0,
tage: 18,
tscore: 88,
tphone: "010-86888889",
ttel: "13933939665",
children: [{
tid: 21,
tname: "梦龙",
tgender: 0,
tage: 26,
tscore: 36,
tphone: "010-86888889",
ttel: "13933939665",
}, {
tid: 22,
tname: "梦龙",
tgender: 0,
tage: 19,
tscore: 66,
tphone: "010-86888889",
ttel: "13933939665",
}]
}, {
tid: 3,
tname: "景泽",
tgender: 0,
tage: 25,
tscore: 96,
tphone: "010-86888880",
ttel: "13933939668",
}, {
tid: 4,
tname: "KyungTaek",
tgender: 0,
tage: 22,
tscore: 88,
tphone: "010-86888866",
ttel: "13933939666",
description: "放不下了，用额外的展开行展示吧！！！放不下了，用额外的展开行展示吧！！！放不下了，用额外的展开行展示吧！！！放不下了，用额外的展开行展示吧！！！"
}])
// 获取两个数字之间的随机整数
const getRanNum = (m, n) => {
if (m > n) {
return Math.round((Math.random() * (m - n))) + n
} else {
return Math.round((Math.random() * (n - m))) + m
}
}
// 添加一行新的数据
const addNewData = () => {
let newData = {
tid: data.length + 1,
tname: ['张三', '李四', '王五', '赵六', '王二麻子'][getRanNum(0, 4)] + getRanNum(0, 1000),
tgender: getRanNum(0, 1),
tage: getRanNum(18, 22),
tscore: getRanNum(0, 100),
tphone: "",
ttel: ""
}
data.push(newData)
}
// 深度克隆
const deepClone = (obj) => {
return JSON.parse(JSON.stringify(obj))
}
// 编辑单元格内容
const editData = reactive({})
const edit = (field, record) => { // field - 要修改的字段 data - 字段对应的数据
editData[record[field]] = deepClone(record)
console.log(field, record, editData)
}
// 保存当前编辑的数据
const saveData = (field, record) => {
let key = record[field]
console.log(field, record, editData)
// record = {...editData[key]}
Object.assign(data.find(v => v[field] === key), editData[key])
console.log(field, record, editData)
delete editData[key]
}
// 配置可选项（Tip：需要配合 table 属性 rowKey 使用）
const rowSelection = reactive({
// checkStrictly 配置父子数据选中状态不关联 true(默认值，不关联) | false(关联)
checkStrictly: true,
// onChange 选中项发生变化时的回调 Function(selectedRowKeys, selectedRows)
onChange(selectedRowKeys, selectedRows) {
console.log(`选中项发生变化...selectedRowKeys：${selectedRowKeys}, selectedRows：${selectedRows}`)
},
// onSelect 用户手动选择/取消选择某列的回调 Function(record, selected, selectedRows, nativeEvent)
onSelect(record, selected, selectedRows, nativeEvent) {
console.log("手动选择/取消选择某列...", record, selected, selectedRows, nativeEvent);
},
// onSelectAll 用户手动选择/取消选择所有列的回调 Function(selected, selectedRows, changeRows)
onSelectAll(selected, selectedRows, changeRows) {
console.log("手动选择/取消选择所有列...", selected, selectedRows, changeRows)
},
// onSelectInvert 用户手动选择反选的回调 Function(selectedRows)
onSelectInvert(selectedRows) {
console.log("手动选择反选....", selectedRows)
},
// onSelectNone 用户清空选择的回调 function()
onSelectNone() {
console.log(("清空选择...."))
}
})
// 后端实现筛选排序：这里筛选排序功能交给服务端实现，列不需要指定具体的 onFilter 和 sorter 函数，而是在把筛选和排序的参数发到服务端来处理。
// @change 分页、排序、筛选变化时触发 Function(pagination, filters, sorter, { currentDataSource })
const handleTableChange = (pagination, filters, sorter) => {
console.log(pagination, filters, sorter)
}
// 前端实现筛选排序：通过指定具体的 onFilter 和 sorter 函数实现
// @resizeColumn 拖动列时触发的事件 Function(width, column)
const handleResizeColumn = (w, col) => {
console.log(w, col, "=================")
col.width = w;
};
// createFromIconfontCN 方法，调用在 iconfont.cn 上自行管理的图标
const MyIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});
// Popconfirm 气泡确认框。对应的确认和取消事件
const confirm = (rowIdx) => {
data.splice(rowIdx, 1)
// 调用异步删除的接口，待返回数据后执行如下 message 提示
message.success('删除成功！');
};
const cancel = (e) => {
console.log(e);
message.info('删除操作已取消！');
};
</script>
<template>
<div class="wrapper">
<a-space>
<!-- 所有的图标都会以 <svg> 标签渲染，可以使用 style 和 class 设置图标的大小和单色图标的颜色。 -->
<star-outlined />
<star-filled :style="{fontSize: '16px', color: '#f00'}" />
<!-- 使用 SVG 图标的好处：完全离线化使用；在低端设备上 SVG 有更好的清晰度；支持多色图标 -->
<!-- x-two-tone 双色图标风格 x-ouline 线框风格 x-filled 实底风格-->
<heart-two-tone two-tone-color="#eb2f96" />
<!-- 渲染阿里矢量图标库 iconfont.cn 上自行管理的图标 -->
<MyIcon type="icon-dianzan" style="fontSize:24px;color: orange;" />
<!-- 添加数据按钮 -->
<a-button @click="addNewData">添加</a-button>
<!-- 控制 Tree 数据选择时，父子数据选中状态是否关联 -->
CheckStrictly：<a-switch v-model:checked="rowSelection.checkStrictly"></a-switch>
</a-space>
<!-- dataSource 配置数据源。任意数组对象，数组中的每一个对象，作为一行数据的集合 -->
<!-- columns 配置列相关属性。如：title、dataIndex、align 等常见属性 -->
<!-- scroll 设置指定滚动区域的相关特性。如果设置滚动区域的值，区域(x,y)，此特性可用于固定头和列。-->
<!-- size 设置表格大小 default(默认) | middle | small 注：small 小型列表只用于对话框内-->
<!-- rowSelection 配置列表项是否可选择（配置项 object 属性见 API） -->
<!-- rowClassName 表格行的类名 Function(record, index):string -->
<a-table class="table" bordered :dataSource="data" :columns="columns" :loading="loading" size="middle"
:scroll="{ x: 1500, y: 500 }" @resizeColumn="handleResizeColumn" @change="handleTableChange"
:rowSelection="rowSelection" :indentSize="30" :rowKey="record => record.tid"
:rowClassName="(record,index) => index % 2 === 1 ? 'table-striped' : null">
<!-- headerCell 个性化头部单元格 v-slot:headerCell="{title, column}" -->
<template #headerCell="{ title, column }">
<span v-if="column.dataIndex=='tname'">
<user-outlined />
{{ title }}
</span>
<span v-if="column.dataIndex=='operation'">
<tool-outlined />
{{ title }}
</span>
</template>
<!-- bodyCell 个性化单元格 v-slot:bodyCell="{text, record, index, column}" -->
<template #bodyCell="{ text, record, index, column }">
<!-- 当前单元格的值：{{ text }} ~ 当前行数据：{{ record }} ~ 当前行的索引：{{index}} ~ 当前列相关属性：{{column}} -->
<!-- <span v-if="column.dataIndex === 'tgender'">{{ record.tgender === 0 ? '男' : '女' }}</span> -->
<span v-if="column.dataIndex === 'operation'">
<!-- shape 用于设置按钮形状 default | round | circle -->
<a-button type="primary" shape="round">编辑</a-button>
<!-- Popconfirm 气泡确认框。当目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。和 'confirm' 弹出的全屏居中模态对话框相比，交互形式更轻量。 -->
<a-popconfirm title="确认删除当前人员信息？" ok-text="确认" cancel-text="取消" @confirm="confirm(index)"
@cancel="cancel">
<a-button type="warning" shape="round" class="m-l-10">删除</a-button>
</a-popconfirm>
</span>
<div v-if="['ttel','tphone'].includes(column.dataIndex)">
<div v-if="!editData[record[column.dataIndex]]">
{{ text || ''}}
<!-- 设置联系方式可编辑 icon -->
<edit-outlined class="h-edit-icon" @click="edit(column.dataIndex,record)" />
</div>
<div v-else>
<a-input v-model:value="editData[record[column.dataIndex]][column.dataIndex]"
@pressEnter="saveData(column.dataIndex,record)" />
<check-outlined class="h-check-icon" @click="saveData(column.dataIndex,record)" />
</div>
</div>
</template>
<!-- expandedRowRender 额外的展开行 Function(record, index, indent, expanded):VNode | v-slot:expandedRowRender="{record, index, indent, expanded}" -->
<!-- <template #expandedRowRender="{ record }">
<p style="margin: 0">
{{ record?.description??'' }}
</p>
</template> -->
<!-- Tip：额外的展开行不能与 Table Tree 一起使用（dataSource中不能有children），控制台报错。且不要存在行合并，样式会错位。 -->
<!-- title 表格标题 Function(currentPageData)|v-slot:title="currentPageData" -->
<template #title><strong>header 表格头部 ~~~~ title表格标题</strong></template>
<!-- summary 总结栏 v-slot:summary -->
<template #summary>
<!-- 通过 summary 设置总结栏。使用 a-table-summary-cell 同步 Column 的固定状态。你可以通过配置 a-table-summary 的 fixed 属性使其固定。 -->
<a-table-summary fixed>
<a-table-summary-row>
<a-table-summary-cell :index="0">Summary</a-table-summary-cell>
<a-table-summary-cell :index="1">当前列总结内容</a-table-summary-cell>
<a-table-summary-cell :index="2">当前列总结内容</a-table-summary-cell>
<a-table-summary-cell :index="3">当前列总结内容</a-table-summary-cell>
<a-table-summary-cell :index="4">当前列总结内容</a-table-summary-cell>
<a-table-summary-cell :index="5">当前列总结内容</a-table-summary-cell>
<a-table-summary-cell :index="6">当前列总结内容</a-table-summary-cell>
<a-table-summary-cell :index="7">当前列总结内容</a-table-summary-cell>
<a-table-summary-cell :index="8">当前列总结内容</a-table-summary-cell>
<a-table-summary-cell :index="9">当前列总结内容</a-table-summary-cell>
</a-table-summary-row>
</a-table-summary>
</template>
<!-- footer 表格尾部 Function(currentPageData)|v-slot:footer="currentPageData" -->
<template #footer><strong>footer ~~~ 表格尾部</strong></template>
<!-- emptyText 自定义空数据时的显示内容 v-slot:emptyText -->
<template #emptyText>
<!-- a-empty 用于定义空状态的组件 -->
<a-empty description="列表为空">
<!-- description 自定义描述内容 string | v-slot -->
<!-- <template #description>暂无数据</template> -->
</a-empty>
<!-- <span>暂无数据</span> -->
</template>
<!-- Tip：默认情况下，列表中无数据，会有默认的空状态展示 -->
</a-table>
</div>
</template>
Table
参数 说明 类型 默认值 版本
bodyCell 个性化单元格 v-slot:bodyCell=“{text, record, index, column}” - 3.0
bordered 是否展示外边框和列边框 boolean false
childrenColumnName 指定树形结构的列名 string children
columns 表格列的配置描述，具体项见下表 array -
components 覆盖默认的 table 元素 object -
customFilterDropdown 自定义筛选菜单，需要配合 column.customFilterDropdown 使用 v-slot:customFilterDropdown=“FilterDropdownProps” - 3.0
customFilterIcon 自定义筛选图标 v-slot:customFilterIcon=“{filtered, column}” - 3.0
customHeaderRow 设置头部行属性 Function(columns, index) -
customRow 设置行属性 Function(record, index) -
dataSource 数据数组 object[]
defaultExpandAllRows 初始时，是否展开所有行 boolean false
defaultExpandedRowKeys 默认展开的行 string[] -
emptyText 自定义空数据时的显示内容 v-slot:emptyText - 3.0
expandedRowKeys(v-model) 展开的行，控制属性 string[] -
expandedRowRender 额外的展开行 Function(record, index, indent, expanded):VNode | v-slot:expandedRowRender=“{record, index, indent, expanded}” -
expandFixed 控制展开图标是否固定，可选 true left right boolean | string false 3.0
expandIcon 自定义展开图标 Function(props):VNode | v-slot:expandIcon=“props” -
expandRowByClick 通过点击行来展开子行 boolean false
footer 表格尾部 Function(currentPageData)|v-slot:footer=“currentPageData”
getPopupContainer 设置表格内各类浮层的渲染节点，如筛选菜单 (triggerNode) => HTMLElement () => TableHtmlElement 1.5.0
headerCell 个性化头部单元格 v-slot:headerCell=“{title, column}” - 3.0
indentSize 展示树形数据时，每层缩进的宽度，以 px 为单位 number 15
loading 页面是否加载中 boolean|object false
locale 默认文案设置，目前包括排序、过滤、空数据文案 object filterConfirm: 确定
filterReset: 重置
emptyText: 暂无数据
pagination 分页器，参考配置项或 pagination文档，设为 false 时不展示和进行分页 object
rowClassName 表格行的类名 Function(record, index):string -
rowExpandable 设置是否允许行展开 (record) => boolean - 3.0
rowKey 表格行 key 的取值，可以是字符串或一个函数 string|Function(record):string ‘key’
rowSelection 列表项是否可选择，配置项 object null
scroll 表格是否可滚动，也可以指定滚动区域的宽、高，配置项 object -
showExpandColumn 设置是否展示行展开列 boolean true 3.0
showHeader 是否显示表头 boolean true
showSorterTooltip 表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时，将被设置为 Tooltip 的属性 boolean | Tooltip props true 3.0
size 表格大小 default | middle | small default
sortDirections 支持的排序方式，取值为 ascend descend Array [ascend, descend]
sticky 设置粘性头部和滚动条 boolean | {offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement} - 3.0
summary 总结栏 v-slot:summary - 3.0
tableLayout 表格元素的 table-layout 属性，设为 fixed 表示内容不会影响列的布局 - | ‘auto’ | ‘fixed’ 无
固定表头/列或使用了 column.ellipsis 时，默认值为 fixed 1.5.0
title 表格标题 Function(currentPageData)|v-slot:title=“currentPageData”
transformCellText 数据渲染前可以再次改变，一般用于空数据的默认配置，可以通过 ConfigProvider 全局统一配置 Function({ text, column, record, index }) => any，此处的 text 是经过其它定义单元格 api 处理后的数据，有可能是 VNode | string | number 类型 - 1.5.4
事件
事件名称 说明 回调参数
change 分页、排序、筛选变化时触发 Function(pagination, filters, sorter, { currentDataSource })
expand 点击展开图标时触发 Function(expanded, record)
expandedRowsChange 展开的行变化时触发 Function(expandedRows)
resizeColumn 拖动列时触发 Function(width, column)
Column 列描述数据对象，是 columns 中的一项，Column 使用相同的 API。
参数 说明 类型 默认值 版本
align 设置列的对齐方式 left | right | center left
colSpan 表头列合并,设置为 0 时，不渲染 number
customCell 设置单元格属性 Function(record, rowIndex, column) - column add from 3.0
customFilterDropdown 启用 v-slot:customFilterDropdown，优先级低于 filterDropdown boolean false 3.0
customHeaderCell 设置头部单元格属性 Function(column) -
customRender 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引 Function({text, record, index, column}) {} -
dataIndex 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 string | string[] -
defaultFilteredValue 默认筛选值 string[] - 1.5.0
defaultSortOrder 默认排序顺序 ascend | descend -
ellipsis 超过宽度将自动省略，暂不支持和排序筛选一起使用。
设置为 true 或 { showTitle?: boolean } 时，表格布局将变成 tableLayout=“fixed”。 boolean | { showTitle?: boolean } false 3.0
filterDropdown 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 VNode -
filterDropdownVisible 用于控制自定义筛选菜单是否可见 boolean -
filtered 标识数据是否经过过滤，筛选图标会高亮 boolean false
filteredValue 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 string[] -
filterIcon 自定义 filter 图标。 VNode | ({filtered: boolean, column: Column}) => vNode false
filterMode 指定筛选菜单的用户界面 ‘menu’ | ‘tree’ ‘menu’ 3.0
filterMultiple 是否多选 boolean true
filters 表头的筛选菜单项 object[] -
filterSearch 筛选菜单项是否可搜索 Boolean false 3.0
fixed 列是否固定，可选 true(等效于 left) ‘left’ ‘right’ boolean|string false
key Vue 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性 string -
maxWidth 拖动列最大宽度，会受到表格自动调整分配宽度影响 number - 3.0
minWidth 拖动列最小宽度，会受到表格自动调整分配宽度影响 number 50 3.0
resizable 是否可拖动调整宽度，此时 width 必须是 number 类型 boolean - 3.0
responsive 响应式 breakpoint 配置列表。未设置则始终可见。 Breakpoint[] - 3.0
showSorterTooltip 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 showSorterTooltip boolean | Tooltip props true
sortDirections 支持的排序方式，取值为 ‘ascend’ ‘descend’ Array [‘ascend’, ‘descend’] 1.5.0
sorter 排序函数，本地排序使用一个函数(参考 Array.sort 的 compareFunction)，需要服务端排序可设为 true Function|boolean -
sortOrder 排序的受控属性，外界可用此控制列的排序，可设置为 ‘ascend’ ‘descend’ false boolean|string -
title 列头显示文字 string -
width 列宽度 string|number -
onFilter 本地模式下，确定筛选的运行函数, 使用 template 或 jsx 时作为filter事件使用 Function -
onFilterDropdownVisibleChange 自定义筛选菜单可见变化时调用，使用 template 或 jsx 时作为filterDropdownVisibleChange事件使用 function(visible) {} -
rowSelection 选择功能的配置。
参数 说明 类型 默认值 版本
checkStrictly checkable 状态下节点选择完全受控（父子数据选中状态不再关联） boolean true 3.0
columnTitle 自定义列表选择框标题 string|VNode -
columnWidth 自定义列表选择框宽度 string|number -
fixed 把选择框列固定在左边 boolean -
getCheckboxProps 选择框的默认属性配置 Function(record) -
hideDefaultSelections 去掉『全选』『反选』两个默认选项 boolean false
hideSelectAll 隐藏全选勾选框与自定义选择项 boolean false 3.0
preserveSelectedRowKeys 当数据被删除时仍然保留选项的 key boolean - 3.0
selectedRowKeys 指定选中项的 key 数组，需要和 onChange 进行配合 string[] []
selections 自定义选择项 配置项, 设为 true 时使用默认选择项 object[] | boolean true
type 多选/单选，checkbox or radio string checkbox
onChange 选中项发生变化时的回调 Function(selectedRowKeys, selectedRows) -
onSelect 用户手动选择/取消选择某列的回调 Function(record, selected, selectedRows, nativeEvent) -
onSelectAll 用户手动选择/取消选择所有列的回调 Function(selected, selectedRows, changeRows) -
onSelectInvert 用户手动选择反选的回调 Function(selectedRows) -
onSelectNone 用户清空选择的回调 function() - 3.0
scroll
参数 说明 类型 默认值
scrollToFirstRowOnChange 当分页、排序、筛选变化后是否滚动到表格顶部 boolean -
x 设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 ‘max-content’ string | number | true -
y 设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值 string | number -
selection 自定义选择配置项
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| key | Vue 需要的 key | 建议设置 string | - |
| – | – | – | – |
| text | 选择项显示的文字 | string | VNode |
| – | – | – | – |
| onSelect | 选择项点击回调 | Function(changeableRowKeys) | - |