antd表格行选择中全选复选框的自定义样式

Question

我有一个使用 antd ui 库创建的表格，并使用 Table 组件的 props 实现了一个全选复选框。

我的行选择如下。

const rowSelection = {
    onChange: (selectedRowKeys: any, selectedRows: any) => {
      setSelectedRows(selectedRows);
    },
    getCheckboxProps: (record: any) => ({
      disabled: record.name === "Disabled User",
      // Column configuration not to be checked
      name: record.name,
    }),
  };

一切正常。但是在选择所有行时，标题的复选框也会如选中所示。这很好，但我想在全选复选框中使用“-”符号而不是“选中”符号。我该怎么做？

我可以使用columnTitle prop 渲染自定义复选框，如下所示

const rowSelection = {
        columnTitle: selectedRowKeys.length > 0 ? <div>custom checkbox</div> : <></>,
        onChange: (selectedRowKeys: any, selectedRows: any) => {
          setSelectedRows(selectedRows);
        },
        getCheckboxProps: (record: any) => ({
          disabled: record.name === "Disabled User",
          // Column configuration not to be checked
          name: record.name,
        }),
      };

但随后它失去了全选功能。我该如何解决这个问题？

Answer 1

看来您必须使用 css 解决这个问题。

    thead tr th:first-child .ant-checkbox-inner::after {
      position: relative;
      color: black;
      border: none;
      width: 25px;
      height: 25px;
      background: transparent;
      transform: none;
      top: 0%;
      content: '-';
    }