手把手教你如何将ATable封装成TableForm表单组件

在「接口测试平台」专栏的《16 接口自动化 接口管理模块开发（五）》中，将Ant Design Vue提供的ATable组件封装为可以编辑的表单组件TableForm，本章就手把手教你如何将ATable封装成表单组件。主要效果如下：

无数据时，自定义样式展示【新增】按钮：

编辑时，表单字段均可编辑，每行均可【删除】和【新增】：

初始表格样式

首先访问Ant Desgin Vue官网，将Table组件的默认样式拷贝到本地项目中进行调试。

<template>
  <a-table :dataSource="dataSource" :columns="columns" />
</template>
<script setup>
import { ref } from "vue";

const dataSource = ref([
  {
    key: "1",
    name: "胡彦斌",
    age: 32,
    address: "西湖区湖底公园1号",
  },
  {
    key: "2",
    name: "胡彦祖",
    age: 42,
    address: "西湖区湖底公园1号",
  },
]);
const columns = ref([
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "住址",
    dataIndex: "address",
    key: "address",
  },
]);
</script>

效果如下图所示：

因为要做的是Tab了Form的效果，所以需要现将默认的分页关闭，只需奥将pagination设置为false即可。

空内容样式

首先将dataSource中的数据注释掉，变为空数组，默认样式如下图所示。

现在想要实现的效果就是无数据时，将文案No Data修改为【新增】按钮。

官网文档中可以看到组件提供了空数据时的插槽，可以自行进行修改。

上诉代码是利用插槽新增了一个按钮，刷新页面后，看到效果如下。如果为了美观，还可以新增一些默认图片。

然后给【新增】按钮添加点击事件，点击新增按钮后，往dataSource中插入一行空数据。

TableForm样式

官网文档中可以看到组件同样也提供单元格的插槽，可以自行进行修改。

首先将目前的展示的单元格插槽全部更改为Input组件，

刷新页面看到效果如下图所示，点击【新增】按钮后出现了一个新的空行，且所有字段均支持输入。

接下来要给Table新增一行，用来新建一行/删除当前行，首先要给columns新增一个对应，为表头的定义。

然后在bodyCell插槽中对option进行自定义，新建一行/删除当前行可以使用图标或者的按钮，这里以按钮来演示。

然后给两个按钮分别定义点击事件，【新增】按钮用来新增一行，可直接调用之前定义的addParam方法；【删除】按钮用来删除当前行，因此需要将当前行的index作为参数。

再次刷新页面，可以看到【新增】和【删除】按钮都可以操作了。最终效果如下图：

完整代码

最后完整代码附上，感兴趣的可以自行进行调整哦～

<template>
  <a-table :dataSource="dataSource" :columns="columns" :pagination="false">
    <template #bodyCell="{ column, record, index }">
      <template v-if="column.key === 'name'">
        <a-input v-model:value="record.name" />
      </template>
      <template v-if="column.key === 'age'">
        <a-input v-model:value="record.age" />
      </template>
      <template v-if="column.key === 'address'">
        <a-input v-model:value="record.address" />
      </template>
      <template v-if="column.key === 'option'">
        <a-button type="link" @click="addParam">新增</a-button>
        <a-button type="link" @click="deleteParam(index)">删除</a-button>
      </template>
    </template>
    <template #emptyText>
      <a-button type="primary" @click="addParam">新增</a-button>
    </template>
  </a-table>
</template>
<script setup>
import {
      
       ref } from "vue";

const dataSource = ref([
  // {
      
      
  //   key: "1",
  //   name: "胡彦斌",
  //   age: 32,
  //   address: "西湖区湖底公园1号",
  // },
  // {
      
      
  //   key: "2",
  //   name: "胡彦祖",
  //   age: 42,
  //   address: "西湖区湖底公园1号",
  // },
]);
const columns = ref([
  {
      
      
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
      
      
    title: "年龄",
    dataIndex: "age",
    key: "age",
  },
  {
      
      
    title: "住址",
    dataIndex: "address",
    key: "address",
  },
  {
      
      
    title: "",
    dataIndex: "option",
    key: "option",
  },
]);

const addParam = () => {
      
      
  dataSource.value.push({
      
      
    key: "",
    name: "",
    age: "",
    address: "",
  });
};
const deleteParam = (index) => {
      
      
  dataSource.value.splice(index, 1);
};
</script>