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

Question

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

我的行选择如下完成。

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道具呈现自定义复选框，如下所示

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: '-';
    }