使用vxe-table实现动态表格 可以添加行删除行

使用vxe-table可以很方便地实现动态表格，并且可以通过添加行和删除行来动态修改表格数据。下面是一个简单的示例代码：

<template>
  <div>
    <vxe-table :data="tableData" border show-footer>
      <vxe-table-column type="index" width="60"></vxe-table-column>
      <vxe-table-column field="name" title="姓名"></vxe-table-column>
      <vxe-table-column field="age" title="年龄"></vxe-table-column>
      <vxe-table-column field="address" title="地址"></vxe-table-column>
      <vxe-table-column
        title="操作"
        width="120"
        :custom-render="renderOperate"
      ></vxe-table-column>
    </vxe-table>
    <button @click="addRow">添加行</button>
    <button @click="deleteRow">删除行</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: "张三", age: 18, address: "北京" },
        { name: "李四", age: 20, address: "上海" },
        { name: "王五", age: 22, address: "广州" }
      ]
    };
  },
  methods: {
    renderOperate({ row }) {
      return [
        <button onClick={() => this.deleteRow(row)}>删除</button>
      ];
    },
    addRow() {
      this.tableData.push({ name: "", age: null, address: "" });
    },
    deleteRow(row) {
      const index = this.tableData.indexOf(row);
      if (index > -1) {
        this.tableData.splice(index, 1);
      }
    }
  }
};
</script>