antd-vue - - - - - table增加统计行？默认勾选?

第一次遇到这个需求，有点懵。
在【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];
...
...