固定列表蚂蚁设计

时间:2020-05-08 03:59:32

标签: reactjs ant-design-pro

我在蚂蚁设计中使用固定的右列表时遇到问题。我有一个包含数据的表,并且在其中一列中设置了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:

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

0 个答案:

没有答案