antd行点击选中/取消选中

项目使用的是ant-design-vue@2.x，最近测试提了一个优化建议：行点击选中当前记录。接下来记录一下实现：

行点击事件的要点就是自定义行属性(customRow)，我们可以两步搞定这个需求（行点击选中/取消选中）。

第一步，定义customLine方法：

import { reactive,} from "vue";

setup() {
  const formData = reactive({
    tableData: [], // 表格数据
    selectedIds: [], // 选中记录的ids
    selectedItems: [], // 选中的记录
  });
  // 自定义行属性
  const customLine = (record) => {
    return {
    // 行点击选中/取消选中
    onClick: () => {
      if (formData.selectedIds && formData.selectedIds.length > 0) {
        let index = -1;
        for (let i = 0; i < formData.selectedIds.length; i++) {
          if (formData.selectedIds[i] === record.id) {
            index = i;
          }
        }
        // 如果当前记录未选中，则选中
        if (index === -1) {
          dataState.selectedRowKeys.push(record.id);
          formData.selectedItems.push(record);
          formData.selectedIds.push(record.id);
        } else {
          // 否则取消选中
          formData.selectedIds.splice(index, 1);
          let keyIndex = dataState.selectedRowKeys.findIndex(item => item === record.id);
          dataState.selectedRowKeys.splice(keyIndex, 1);
          let itemIndex = formData.selectedItems.findIndex(item => item.id === record.id);
          formData.selectedItems.splice(itemIndex, 1);
        }
      } else {
        // 当前选中记录为空，直接选中
        dataState.selectedRowKeys.push(record.id);
        formData.selectedItems.push(record);
        formData.selectedIds.push(record.id);
      }
    }
  };
};
  return {
    formData,
    customLine,
  };
}

第二步，在<a-table>标签中设置：

<a-table
    rowKey="id"
    :columns="columns"
    :pagination="false"
    :loading="loading"
    :data-source="formData.tableData"
    :custom-row="customLine"
    :row-selection="{
    selectedRowKeys: selectedRowKeys,
       onChange: onSelectChange,
    }"
>
</a-table>

补充：row-selection是已有的点击复选框选中的配置

import { toRefs, reactive,} from "vue";

setup() {
    const dataState = reactive({
      selectedRowKeys: [],
    });
    const onSelectChange = (selectedRowKeys, selectedRows) => {
      dataState.selectedRowKeys = selectedRowKeys;
      formData.selectedIds.length = 0;
      formData.selectedItems.length = 0;
      if (selectedRows.length > 0) {
        editBtn.value = false;
      } else {
        editBtn.value = true;
      }
      selectedRows.forEach((item) => {
        formData.selectedItems.push(item);
        formData.selectedIds.push(item.id);
      });
    };
    return {
      ...toRefs(dataState),
    };
}