【避坑指“难”】实现ProTable可编辑的拖拽排序

椰卤工程师

已于 2022-01-29 10:50:08 修改

阅读量3.2k

点赞数

分类专栏： React 超级避坑指难文章标签： javascript react.js 前端

于 2022-01-29 10:49:02 首次发布

本文链接：https://blog.csdn.net/weixin_42224055/article/details/122740034

版权

DragSortTable排序采用的react-sortable-hoc，需要提供rowKey来确定数据的唯一值，否则不能正常工作。暂不支持request请求的数据进行排序，可将request请求的数据存起来通过dataSource传入。

⚠️：如果拖拽后列表没有重新排序，很大原因就是没有传入dataSource导致的。所以在request里请求到的数据还需要存入dataSource才行。

ProTable配置

<ProTable
      rowKey="index"
      columns={
   columns}
      actionRef={
   actionRef}
      form={
   form}
      pagination={
   {
   
        pageSize: 10,
      }}
      dataSource={
   dataSource}
      search={
   true}
      request={
   async (params) => {
   
        const res = await getRuleList(p, {
   
          ...params,
          orderByPriority: true,
          current: 1,
          pageSize: 10,
          status: 3,
        });
        const list = res.data.list.map((item: any, index: number) => ({
    ...item, index }));
        setDataSource(list);
        setDisableBtn(list[0].inPriorityAudit);
        return {
   
          data: list,
          success: res?.success,
          total: res?.data?.total,
        };
      }}
      components={
   {
    
        body: {
   
          wrapper: DraggableContainer,
          row: DraggableBodyRow,
        },
      }}
      toolBarRender={
   () => [
        <Button
          onClick={
   () => setIsEdit(true)}
          type="primary"
          disabled={
   disableBtn}
          style={
   {
    display: isEdit ? 'none' : 'block' }}
        >
          编 辑
        </Button>,

        <Button
          onClick={
   () => setIsEdit(false)}
          type=