Блог

У меня есть таблица, созданная с использованием библиотеки пользовательского интерфейса antd, и я установил флажок «Выбрать все», используя реквизиты компонента таблицы.

Мой выбор строки выполняется следующим образом.

 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,
        }),
      };
  

Но тогда он теряет функциональность «Выбрать все». Как я могу решить эту проблему?

Похоже, вам придется решить это с помощью 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: '-';
    }