a-table表头添加复选框勾选

需求：表格表头添加复选框，每一行添加复选框，勾选数据时数据图表数据跟着变化

直接上代码 

<a-table :row-selection="rowSelection" :columns="columnList"
        :scroll="{ x: '100%', y: tableMaxHeight }" :row-key="(record) => record.id" 
             :data-source="tableData"
        bordered :pagination="false">
        <!-- 自定义表头渲染 -->
        <template #headerCell="{ column, title }">
          <div v-if="
            column.dataIndex !== 'index' &&
            column.name !== '日期' 
          ">
            <a-checkbox v-model:checked="column.checkboxChecked" @change="handleHeaderCheckboxChange(column, title)" />
            {{ column.name || "--" }}
          </div>
          <div v-else>
            {{ column.name }}
          </div>
        </template>
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.dataIndex === 'index'">
            <span>{{ getIndex(index) }}</span>
          </template>
          <template v-else>
            <span>{{
              getFieldValue(record, column.dataIndex, column, text) || "--"
            }}</span>
          </template>
        </template>
</a-table>

逻辑

//处理表头复选框
const handleHeaderCheckboxChange = (column) => {
   //表头选中的数据
  const filterHeader = columnList.filter((a) => a.checkboxChecked);
  .......
};
//行复选框
const rowSelection = reactive({
  selectedRowKeys: [], // 初始化选中的行的 key 数组
  selectedRows: [], // 初始化选中的行数据
  fixed: true,
  onChange: (selectedRowKeys, selectedRows) => {
    rowSelection.selectedRowKeys = selectedRowKeys;
    rowSelection.selectedRows = selectedRows;
  },
});
//添加序号  页码自定义
const getIndex = (index) => {
  const { pageNum, pageSize } = state.orderListQuery;
  if (!Number.isFinite(pageNum) || !Number.isFinite(pageSize)) {
    return "--";
  }
  return (pageNum - 1) * pageSize + index + 1;
};
//显示内容
const getFieldValue = (record, fieldId, column, text) => {
    //处理数据就行了
};

数据源模拟

const columnList= ref([
     {
         name: "序号",
         dataIndex: "index",
         align: "center",
         width: 100,
         fixed: "left",
     },
     {
         name: "日期",
         dataIndex: "date",
         key: "name",
         checkboxChecked: false, // 用于绑定表头 Checkbox 的状态
         align: "center",
     },
    {
        title: "姓名",
        dataIndex: "name",
        key: "name",
        checkboxChecked: false, // 用于绑定表头 Checkbox 的状态
        align: "center",
    },
    {
        title: "年龄",
        dataIndex: "age",
        key: "age",
        checkboxChecked: false,
        align: "center",
    },
]);

const tableData = ref([
    {
        key: "1",
        name: "张三",
        age: 28,
        checked: false, // 用于绑定行 Checkbox 的状态
    },
    {
        key: "2",
        name: "张三",
        age: 28,
        checked: false, // 用于绑定行 Checkbox 的状态
    },
    {
        key: "3",
        name: "李四",
        age: 32,
        checked: false,
    },
]);

 效果：