【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)	-