Фиксированная колонка таблицы муравей дизайн - PullRequest
Новая
       32

Фиксированная колонка таблицы муравей дизайн

0 голосов
/ 08 мая 2020

У меня проблема, когда я использую таблицу с фиксированным правым столбцом в дизайне муравьев. У меня есть таблица с данными, и в одном столбце я установил на ней onFilter. В первый раз моя таблица выглядит так: enter image description here

Но когда я фильтрую один столбец, я сбрасываю фильтр, моя таблица отображает ошибку. мой фиксированный столбец находится вне моей таблицы, и я не знаю почему? enter image description here

Это мои столбцы: 

const columns = [
      {
        title: 'STT',
        dataIndex: 'index',
        align: 'center',
        width: '80px',
      },
      {
        title: 'Loại tin tức',
        dataIndex: 'idLoaiTinTuc',
        align: 'center',
        width: 150,
        filters: filterLoai,
        onFilter: (value, record) => _.get(record, 'idLoaiTinTuc._id', '') === value,
        render: value => _.get(value, 'tenLoaiTinTuc', ''),
      },
      {
        title: 'Chủ đề',
        dataIndex: 'idChuDe',
        align: 'center',
        width: 150,
        render: value => _.get(value, 'tenChuDe', ''),
      },
      {
        title: 'Tiêu đề',
        dataIndex: 'tieuDe',
        align: 'center',
        width: 300,
        ...this.getColumnSearchProps('tieuDe'),
        ...this.paragraphProps('tieuDe'),
      },
      {
        title: 'Mô tả',
        dataIndex: 'moTa',
        align: 'center',
        width: 300,
        ...this.getColumnSearchProps('moTa'),
        ...this.paragraphProps('moTa'),
      },
      {
        title: 'Điểm',
        dataIndex: 'diem',
        align: 'center',
        width: 100,
        render: diem => <Tag color={'green'}>{diem ? diem : 0}</Tag>,
      },
      {
        title: 'Ngày đăng',
        dataIndex: 'ngayDang',
        align: 'center',
        width: '150px',
        render: (time, record) => moment(time).format('DD/MM/YYYY'),
      },
      {
        title: 'Đăng tải',
        dataIndex: 'dangTai',
        align: 'center',
        // width: '10%',
        filters: [
          { text: 'Đăng tải', value: true },
          { text: 'Không đăng tải', value: false },
        ],
        onFilter: (value, record) => record.dangTai === value,
        render: value => (!value ? 'Không đăng tải' : 'Đăng tải'),
      },
      {
        title: 'Sửa/Xóa',
        key: 'Sua/Xoa',
        width: 120,
        align: 'center',
        fixed: 'right',
        render: (text, record) => (
          <React.Fragment>
            <Button
              type="primary"
              shape="circle"
              icon="edit"
              onClick={() => this.handleEditBaiViet(record)}
              title="Chỉnh sửa"
            />
            <Divider type="vertical" />

            <Popconfirm
              title="Bạn có chắc muốn xóa?"
              onConfirm={() => this.handleDelBaiViet(record._id)}
            >
              <Button type="danger" shape="circle" icon="delete" title="Xóa" />
            </Popconfirm>
          </React.Fragment>
        ),
      },
    ];

, и я использую такую ​​таблицу: 

<Table
   style={{ marginTop: 10 }}
   loading={loading}
   bordered
   columns={columns}
   dataSource={danhSachBaiViet}
scroll={{ x: 2000 }}
/>
...