Antd中Table列表行默認包含修改及刪除功能的封裝方法

更新時間：2022年12月22日 11:53:29 作者：曲鳥

這篇文章主要介紹了Antd中Table列表行默認包含修改及刪除功能的封裝,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

一、前言

ant-design是非常不錯、方便的一款前端組件庫，而這次用到的ProComponents則是在 Ant Design 上進行了自己的封裝，更加易用，與 Ant Design 設計體系一脈相承，無縫對接 antd 項目，樣式風格與 antd 一脈相承，無需魔改，渾然天成。一些預設行為也達到了更少的代碼，更少的 Bug的目的。

這里我使用ProComponents的editable-table時發(fā)現(xiàn)它的表格默認自帶了修改刪除功能：

在這里插入圖片描述

代碼封裝的actionRender方法提供了相應的參數(shù)來使用默認的修改刪除：

在這里插入圖片描述

自己使用的項目也有非常多的表單，大部分都包含修改刪除功能，所以對我來講也是非常實用的，但它的修改是在行內(nèi)編輯，我的需要彈窗編輯，所以這里根據(jù)自己的思路封裝了一下，下面分享給大家。

二、給Table封裝默認的修改、刪除功能

整個封裝過程把思路理清楚了也能很簡單的實現(xiàn)，首先是將彈窗方法（不同功能的表單會有差異）傳遞給封裝的公共Table：

  //彈窗方法
  const showModal = (type: string, values: any = {}) => {
    values['formType'] = type;
    setFormData(values);
    setFormVisible(true);
  };

傳遞給table：

     <LimTable
        actionRef={ref}
        columns={columns}
        func={UserView}
        showModal={showModal}
        headerTitle="用戶列表"
      />

然后在公共Table組件中定義默認表單的操作方法（修改，刪除）這里只提供思路，代碼不適用于你的項目：

  //默認的表單操作dom
  const defaultColumnDom = {
    update: (record: any) => (
      <a key="update" onClick={() => showModal(PATCH, record)}>
        修改
      </a>
    ),
    delete: (record: any) => (
      <a
        key="delete"
        onClick={() => {
          deleteDataFunc(func, record.id);
        }}
      >
        刪除
      </a>
    ),
  };

然后放入設置表單操作欄的方法中：

  //設置表單options（操作欄）的方法
  const setDefualtColumnsOptions = () => {
    for (let i = 0; i < columns.length; i++) {
      if (columns[i].dataIndex === 'option') {
        if (!optionRender) {
          //沒有配置optionRender則默認增加修改、刪除功能
          columns[i].render = (_: any, record: any) => [
            defaultColumnDom.update(record),
            defaultColumnDom.delete(record),
          ];
        } else {
          columns[i].render = (_: any, record: any) =>
            optionRender({ update: defaultColumnDom.update(record), delete: defaultColumnDom.delete(record) }, record);
        }
        break;
      }
    }
  };

最后加入useEffect中即可完成：

 useEffect(() => {
    setDefualtColumnsOptions();
  }, []);

三、實現(xiàn)效果

當我們不傳遞optionRender時，列表默認攜帶修改、和刪除功能：

在這里插入圖片描述

當我們傳遞了optionRender時，列表根據(jù)傳遞的渲染操作欄：

只包含修改功能

      <LimTable
        actionRef={ref}
        columns={columns}
        func={UserView}
        optionRender={(dom: any) => [dom.update]}
        showModal={showModal}
        headerTitle="用戶列表"
      />

在這里插入圖片描述

包含修改功能并附加文字：

      <LimTable
        actionRef={ref}
        columns={columns}
        func={UserView}
        optionRender={(dom: any) => [dom.update, '曲鳥']}
        showModal={showModal}
        headerTitle="用戶列表"
      />

在這里插入圖片描述