vxe Table 插入一行

Vue 表格插件 VxeTable 提供了一种便捷的方式来动态插入行数据。要在 VxeTable 中插入一行，通常需要以下几个步骤：

1. 首先，确保你已经安装了 VxeTable，并且在你的 Vue 实例中引入并配置了它。

<template>
  <vxe-table :data="tableData" @insert="handleInsert">
    <!-- table columns configuration -->
  </vxe-table>
</template>

<script>
import { ref } from 'vue';
import { VxeTable } from 'vxe-table';

export default {
  components: {
    VxeTable,
  },
  data() {
    return {
      tableData: [], // 初始化的数据数组
    };
  },
  methods: {
    handleInsert(row) { // 当需要插入新行时调用这个方法
      this.tableData.push(row); // 将新行添加到现有的数据数组中
    },
  },
};
</script>

2. `@insert` 是一个事件处理器，当用户触发插入操作（例如点击添加按钮）时，`handleInsert` 方法会被调用。你可以在这个方法里创建新的行对象，并传递给 `push` 方法添加到表格的数据列表中。

例如，你可以提供一个函数接受新行的数据作为参数：

methods: {
  handleInsert(newRowData) {
    this.tableData.push({
      // 根据你需要填写具体的字段和值，比如：
      name: newRowData.name || '',
      age: newRowData.age || 0,
      // 更多字段...
    });
  },
}