In the "Interface Test Platform" column "16 Interface Automation Interface Management Module Development (5)" , encapsulate the ATable component provided by Ant Design Vue into an editable form component TableForm, this chapter will teach you how to encapsulate ATable into a form component. The main effects are as follows:

When there is no data, the custom style displays the [Add] button:

When editing, the form fields can be edited, and each row can be [Delete] and [Add]:

Initial table style

first visit Ant Desgin Vue official website , copy the default style of the Table component to the local project for debugging.

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

const dataSource = ref([
  {
    key: "1",
    name: "Hu Yanbin",
    age: 32,
    address: "No. 1, Hudi Park, Xihu District",
  },
  {
    key: "2",
    name: "Hu Yanzu",
    age: 42,
    address: "No. 1, Hudi Park, Xihu District",
  },
]);
const columns = ref([
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "age",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "address",
    dataIndex: "address",
    key: "address",
  },
]);
</script>

Results as shown below:

Because what you want to do is to Tab the Form effect, you need to turn off the default paging now, just set the pagination to false.

empty content style

First, comment out the data in the dataSource and turn it into an empty array. The default style is shown in the following figure.

The effect I want to achieve now is to change the text No Data to the [Add] button when there is no data.

In the official website documentation, you can see that the component provides a slot for empty data, which can be modified by yourself.

The appeal code is to use the slot to add a button. After refreshing the page, you can see the effect as follows. If you want to look beautiful, you can also add some default pictures.

Then add a click event to the [Add] button. After clicking the New button, insert a row of empty data into the dataSource.

TableForm style

It can be seen in the official website documentation that the component also provides cell slots, which can be modified by yourself.

First, change all the currently displayed cell slots to Input components,

Refresh the page to see the effect as shown in the figure below. After clicking the [Add] button, a new blank line appears, and all fields support input.

Next, we need to add a new row to the Table to create a new row/delete the current row. First, we need to add a corresponding column to the column, which is the definition of the table header.

Then customize the option in the bodyCell slot. You can use an icon or a button to create a new row/delete the current row. Here is a button to demonstrate.

Then define click events for the two buttons respectively. The [Add] button is used to add a new row, and the previously defined addParam method can be called directly; the [Delete] button is used to delete the current row, so the index of the current row needs to be used as a parameter.

Refresh the page again, you can see that the [Add] and [Delete] buttons can be operated. The final effect is as follows:

full code

The final complete code is attached, you can adjust it yourself if you are interested~

<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">new</a-button>
        <a-button type="link" @click="deleteParam(index)">delete</a-button>
      </template>
    </template>
    <template #emptyText>
      <a-button type="primary" @click="addParam">new</a-button>
    </template>
  </a-table>
</template>
<script setup>
import { ref } from "vue";

const dataSource = ref([
  // {
  //   key: "1",
  //   name: "Hu Yanbin",
  //   age: 32,
  //   address: "No. 1 Hudi Park, Xihu District",
  // },
  // {
  //   key: "2",
  //   name: "Hu Yanzu",
  //   age: 42,
  //   address: "No. 1 Hudi Park, Xihu District",
  // },
]);
const columns = ref([
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "age",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "address",
    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>