在之前的一篇文章中，寫了一個table操作區(qū)域的組件，主要是像圖標(biāo)、間距、文案等，都差不多，干脆用一個組件解決這種重復(fù)問題，詳情可見vben2.0中table的使用，但是測試過程中發(fā)現(xiàn)問題：

問題描述

如果用戶進行刪除操作，第一次操作沒問題，但是后面再刪除，然后confirm確認，發(fā)現(xiàn)頁面刪除方法中接收到的record對應(yīng)的id就不對了，要不就是誤刪了別的數(shù)據(jù)，要不就是刪除的這個還是上一個刪除的對象，并且這種數(shù)據(jù)對不上的問題，僅存在于confirm操作中。

所以，如果單純點擊，或者你想把confirm改成model的形式，其實也是可以的。

問題原因

先看這個代碼，具體的方法就不說了，column.key === 'action'的條件下渲染的就是操作區(qū)域，它是一個單純的渲染操作，由于跟操作的tip有深度組合，在confirm回調(diào)的時候并不具備閉包功能，所以當(dāng)我把TableAction組件換成自定義的TableActionHolder時，里面入的數(shù)據(jù)會被層層替換，它拿到的永遠都是table數(shù)據(jù)的最后一條。

<BasicTable @register="registerTable" :searchInfo="searchInfo" class="voice-table" >
    <template #toolbar>
      <a-button type="primary" @click="createInfo"> 創(chuàng)建版本</a-button>
      <a-button type="primary" @click="handleExport"> 導(dǎo)入</a-button>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <TableAction :actions="createActions(record)" />
      </template>
    </template>
</BasicTable>

顯然vban2中并不想讓我對操作區(qū)域做過多封裝了。

但是我確實不想每次都重復(fù)定義圖標(biāo)和文案，所以我做了一個折中方案，也算是優(yōu)化了，因為之前的組件我需要先定義一個actions來列舉操作按鈕，然后又定義controllers方法搜集點擊回調(diào)，其實有點冗余。

整體思路是按照官方文檔的方式來，它的組件需要的action，我按照更好的方式進行提供：

新方案，好用

1、還是定義操作枚舉

export const actionList = {
  del: {
    icon: 'ant-design:delete-outlined',
    tooltip:'刪除',
    color: 'error',
    popConfirm: {
      title: '確認要刪除此數(shù)據(jù)嗎？',
      placement: 'topRight',
    },
  },
  edit: {
    icon: 'clarity:note-edit-line',
    tooltip: '編輯',
  },
  detail:  {
    icon: 'cil:featured-playlist',
    tooltip: '詳情',
  },
  ......
 }

2、新增了一個merge的方法，把我前面定義的枚舉和在頁面所需要的操作取交集，并處理一些事件綁定。

export function mergeActions(obj){
  const keys = Object.keys(obj);
  const result :ActionItem[]= [];
  keys.forEach(item=>{
    const newItem = {
      ...actionList[item],
      ...obj[item]
    }
    newItem.confirm && (newItem.popConfirm['confirm'] = newItem.confirm)
    result.push(newItem)
  })
  return result;
}

3、模板調(diào)用，我們還是采用原組件，主要更改的是createActions，內(nèi)部使用了上面的mergeActions進行合并，同時還減少了冗余配置

// 模板
<BasicTable @register="registerTable" :searchInfo="searchInfo" class="voice-table" >
    <template #toolbar>
      <a-button type="primary" @click="createInfo"> 創(chuàng)建版本</a-button>
      <a-button type="primary" @click="handleExport"> 導(dǎo)入</a-button>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <TableAction :actions="createActions(record)" />
      </template>
    </template>
</BasicTable>

// 模板中的方法展示
const createActions = (record) => {
    const param = {
      detail: {
        onClick: handleInfo.bind(null, record)
      },
      edit: {
        disabled: record.status !== 1,
        onClick: handleEdit.bind(null, record),
      },
      del: {
        confirm: handleDelete.bind(null, record),
      }
    }
    const result = mergeActions(param);
    return result;
};

原文鏈接：vban2.0中table的使用—action封裝 | 1Z5K