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