第一次遇到这个需求，有点懵。
在【antd-v table】官网仔细看了一番，找到这么两个配置footer[表格尾部]和Summary[总结栏]
所以可以证明，你所需要的需求，总有人在为你负重前行！！！
一、增加统计行
尝试一、footer & Summary
在看到这两个配置项时，就感觉 ‘有救了’ 。
尝试一番过后，也确实基本实现了所需要的功能(我使用的是Summary)
使用summary
代码如下：
const summaryComputed = computed(() => {
// 获取列数据
let col = {
...tableConfig.columns
};
// 将指定列的内容改为 '统计'
for (const key in col) {
if (col[key].dataIndex == "TITLE") {
col[key] = "统计";
} else if (col[key].dataIndex == "AMOUNT") {
// 将指定列的值改为统计值
col[key] = "1,000,000";
} else {
// 其余列皆为空
col[key] = "";
}
}
return col || {
};
});
如此基本实现了需要的功能，如图：
但是我还有另一个需求，就是左侧条件出现复选框列(可参考: antd-vue - - - - - row-selection的使用),这个情况下就错位了，如图：
不符合需求，只能尝试其他方式。
尝试二、直接将统计行push进dataSource
因为右侧有操作列，统计行不需要
代码如下：
...
...
const tableConfig = reactive({
page: 1,
pageSize: 11, // 默认是11条，为了展示统计行
dataSource: [],
columns: [],
specialRowKey: "" // 统计行 key
})
...
...
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
tableConfig.selectedRowKeys = selectedRows;
},
// 统计行 复选框禁用
getCheckboxProps: record => ({
disabled: record[tableConfig.specialRowKey] === "统计", // name为lee的行，禁止选中
name: `${
record[tableConfig.specialRowKey]}`
})
};
...
...
...
// 获取第一列的key 用来判断是否展示操作列 & check是否禁用
const specialRowKey = columns[0]?.dataIndex || "";
...
...
如此，完美满足需求！！
二、默认勾选行
后续增加了这个需求，在网上搜索了很久，尝试多种均无效。
最后将代码改为如下：
...
...
const tableConfig = reactive({
page: 1,
pageSize: 11, // 默认是11条，为了展示统计行
dataSource: [],
columns: [],
specialRowKey: "" // 统计行 key
})
...
...
/**
* 勾选
*/
const onSelectChange = (selectedRowKeys, selectedRows) => {
tableConfig.selectedRowKeys = selectedRowKeys;
};
/**
* 统计行 复选框禁用
*/
const getCheckboxProps = record => ({
disabled: record[tableConfig.specialRowKey] === "统计", // 统计行，禁止选中
name: `${
record[tableConfig.specialRowKey]}`
});
...
...
...
// 获取第一列的key 用来判断是否展示操作列 & check是否禁用
const specialRowKey = columns[0]?.dataIndex || "";
tableConfig.selectedRowKeys = [data[0].id];
...
...