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

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

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

一、前言

ant-design是非常不錯(cuò)、方便的一款前端組件庫(kù)，而這次用到的ProComponents則是在 Ant Design 上進(jìn)行了自己的封裝，更加易用，與 Ant Design 設(shè)計(jì)體系一脈相承，無縫對(duì)接 antd 項(xiàng)目，樣式風(fēng)格與 antd 一脈相承，無需魔改，渾然天成。一些預(yù)設(shè)行為也達(dá)到了更少的代碼，更少的 Bug的目的。

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

在這里插入圖片描述

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

在這里插入圖片描述

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

二、給Table封裝默認(rèn)的修改、刪除功能

整個(gè)封裝過程把思路理清楚了也能很簡(jiǎn)單的實(shí)現(xiàn)，首先是將彈窗方法（不同功能的表單會(huì)有差異）傳遞給封裝的公共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組件中定義默認(rèn)表單的操作方法（修改，刪除）這里只提供思路，代碼不適用于你的項(xiàng)目：

  //默認(rèn)的表單操作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>
    ),
  };

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

  //設(shè)置表單options（操作欄）的方法
  const setDefualtColumnsOptions = () => {
    for (let i = 0; i < columns.length; i++) {
      if (columns[i].dataIndex === 'option') {
        if (!optionRender) {
          //沒有配置optionRender則默認(rèn)增加修改、刪除功能
          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();
  }, []);

三、實(shí)現(xiàn)效果

當(dāng)我們不傳遞optionRender時(shí)，列表默認(rèn)攜帶修改、和刪除功能：

在這里插入圖片描述

當(dāng)我們傳遞了optionRender時(shí)，列表根據(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="用戶列表"
      />

在這里插入圖片描述