vue3 ts 环境下 element-plus el-table 实现插入行

在Vue3 TS环境下，使用Element Plus的el-table组件实现插入行可以按照以下步骤进行：

1. 安装Element Plus和Vue3:

npm install element-plus vue@next

2. 在Vue3组件中引入el-table组件，并定义表格数据和列：

<template>
  <el-table
    :data="tableData"
    :columns="tableColumns"
    :row-key="id"
  >
  </el-table>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

export default defineComponent({
  components: {
    ElTable,
    ElTableColumn,
  },
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 20 },
        { id: 3, name: '王五', age: 22 },
      ],
      tableColumns: [
        { label: 'ID', prop: 'id' },
        { label: '姓名', prop: 'name' },
        { label: '年龄', prop: 'age' },
      ],
    };
  },
});
</script>

3. 在表格中添加一个按钮，用于插入新行：

<template>
  <el-table
    :data="tableData"
    :columns="tableColumns"
    :row-key="id"
  >
    <template #append>
      <el-button type="primary" @click="addRow">添加行</el-button>
    </template>
  </el-table>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { ElTable, ElTableColumn, ElButton } from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

export default defineComponent({
  components: {
    ElTable,
    ElTableColumn,
    ElButton,
  },
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 20 },
        { id: 3, name: '王五', age: 22 },
      ],
      tableColumns: [
        { label: 'ID', prop: 'id' },
        { label: '姓名', prop: 'name' },
        { label: '年龄', prop: 'age' },
      ],
    };
  },
  methods: {
    addRow() {
      const newRow = { id: 4, name: '赵六', age: 24 };
      this.tableData.push(newRow);
    },
  },
});
</script>

4. 点击“添加行”按钮，即可将新行添加到表格的末尾。

上述代码中，我们在el-table组件内部添加了一个template标签，用于渲染“添加行”按钮。该按钮使用了Element Plus的el-button组件，并绑定了一个点击事件addRow。在addRow方法中，我们创建了一个新的行数据newRow，并使用数组的push方法将其添加到tableData数组中。由于tableData是响应式的，因此添加新行后，表格会自动更新。

需要注意的是，我们在el-table组件上添加了一个#append的插槽，该插槽用于渲染在表格底部的操作栏。在操作栏中，我们可以添加按钮、分页器等操作组件，以实现更多的交互效果。