首页 » 前端 » 正文

vban2.0中table的使用—action封装

| 前端 | | 1 条评论 | 232 views

在之前的一篇文章中，写了一个table操作区域的组件，主要是像图标、间距、文案等，都差不多，干脆用一个组件解决这种重复问题，详情可见vban2.0中table的使用，但是测试过程中发现问题：

问题描述

如果用户进行删除操作，第一次操作没问题，但是后面再删除，然后confirm确认，发现页面删除方法中接收到的record对应的id就不对了，要不就是误删了别的数据，要不就是删除的这个还是上一个删除的对象，并且这种数据对不上的问题，仅存在于confirm操作中。

所以，如果单纯点击，或者你想把confirm改成model的形式，其实也是可以的。

问题原因

先看这个代码，具体的方法就不说了，column.key === 'action'的条件下渲染的就是操作区域，它是一个单纯的渲染操作，由于跟操作的tip有深度组合，在confirm回调的时候并不具备闭包功能，所以当我把TableAction组件换成自定义的TableActionHolder时，里面入的数据会被层层替换，它拿到的永远都是table数据的最后一条。

1
2
3
4
5
6
7
8
9
10
11
<BasicTable @register="registerTable" :searchInfo="searchInfo" class="voice-table" >
    <template #toolbar>
      <a-button type="primary" @click="createInfo"> 创建版本</a-button>
      <a-button type="primary" @click="handleExport"> 导入</a-button>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <TableAction :actions="createActions(record)" />
      </template>
    </template>
</BasicTable>

显然vban2中并不想让我对操作区域做过多封装了。

但是我确实不想每次都重复定义图标和文案，所以我做了一个折中方案，也算是优化了，因为之前的组件我需要先定义一个actions来列举操作按钮，然后又定义controllers方法搜集点击回调，其实有点冗余。

整体思路是按照官方文档的方式来，它的组件需要的action，我按照更好的方式进行提供：

新方案，好用

1、还是定义操作枚举

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export const actionList = {
  del: {
    icon: 'ant-design:delete-outlined',
    tooltip:'删除',
    color: 'error',
    popConfirm: {
      title: '确认要删除此数据吗？',
      placement: 'topRight',
    },
  },
  edit: {
    icon: 'clarity:note-edit-line',
    tooltip: '编辑',
  },
  detail:  {
    icon: 'cil:featured-playlist',
    tooltip: '详情',
  },
  ......
}

2、新增了一个merge的方法，把我前面定义的枚举和在页面所需要的操作取交集，并处理一些事件绑定。

1
2
3
4
5
6
7
8
9
10
11
12
13
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、模板调用，我们还是采用原组件，主要更改的是createActions，内部使用了上面的mergeActions进行合并，同时还减少了冗余配置

1
2
3
4
5
6
7
8
9
10
11
12
// 模板
<BasicTable @register="registerTable" :searchInfo="searchInfo" class="voice-table" >
    <template #toolbar>
      <a-button type="primary" @click="createInfo"> 创建版本</a-button>
      <a-button type="primary" @click="handleExport"> 导入</a-button>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <TableAction :actions="createActions(record)" />
      </template>
    </template>
</BasicTable>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 模板中的方法展示
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;
};

本文共 1 个回复

发表评论