Table adds statistical rows
When I encountered this requirement for the first time, I was a little confused. I took a closer look
at the [antd-v table]footer[表格尾部] official website and found these two configurations and Summary[总结栏]
so it can be proved that there is always someone carrying the burden for you! ! !
1. Add statistics line
Try one, footer & Summary
When I saw these two configuration items, I felt 'saved'.
After some attempts, the required functions are basically realized ( I use Summary )
use summary
code show as below:
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 || {
};
});
In this way, the required functions are basically realized, as shown in the figure:
But I still have another requirement, that is, a check box column appears on the left condition (refer to: the use of antd-vue - - - - - row-selection ), in this case It is misplaced, as shown in the figure:
If it doesn't meet your needs, you can only try other methods.
Attempt 2. Push the statistical rows directly into the dataSource
Because there is an operation column on the right, the statistical row does not need
the code as follows:
...
...
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 || "";
...
...
In this way, it perfectly meets the needs! !
Second, the default check line
Later, this requirement was added, and I searched the Internet for a long time, and tried many methods to no avail.
Finally, change the code to the following:
...
...
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];
...
...