vue3+element.plus实现表格行内的编辑和新增

要在Vue3和element-plus中实现表格行内的编辑和新增，你可以使用element-plus提供的el-table-plus组件来替代el-table，el-table-plus支持行内编辑和新增功能。具体步骤如下：

1. 安装并引入element-plus组件库。
2. 在el-table-plus的column中设置prop属性，用来指定表格列的字段名。
3. 在el-table-plus的column中设置editable属性为true，表示该列可编辑。
4. 在el-table-plus的column中设置edit-template slot来自定义编辑时的表单组件。
5. 使用el-table-plus的@save事件监听保存数据事件，当保存数据时，将数据提交到后台或者更新本地数据。

以下是一个示例代码：

<template>
  <el-table-plus :data="tableData" @save="handleSave">
    <el-table-column label="姓名" prop="name" editable></el-table-column>
    <el-table-column label="年龄" prop="age" editable>
      <template #edit-template="{ modelValue, row, column }">
        <el-input-number v-model="modelValue" :min="0" :max="200" />
      </template>
    </el-table-column>
    <el-table-column label="地址" prop="address" editable></el-table-column>
    <el-table-column label="操作" width="120px">
      <template #default="{ row, column }">
        <el-button @click="handleEdit(row)">编辑</el-button>
        <el-button @click="handleDelete(row)">删除</el-button>
      </template>
      <template #edit="{ row, column }">
        <el-button @click="handleSaveEdit(row)">保存</el-button>
        <el-button @click="handleCancelEdit(row)">取消</el-button>
      </template>
    </el-table-column>
  </el-table-plus>
</template>

<script>
import { ref } from 'vue';
import { ElTablePlus } from 'element-plus';

export default {
  components: {
    ElTablePlus,
  },
  setup() {
    const tableData = ref([
      { name: '张三', age: 18, address: '北京市' },
      { name: '李四', age: 20, address: '上海市' },
      { name: '王五', age: 22, address: '广州市' },
    ]);
    const editData = ref({});
    const editIndex = ref(-1);

    const handleEdit = (row) => {
      editData.value = Object.assign({}, row);
      editIndex.value = tableData.value.indexOf(row);
    };

    const handleSaveEdit = (row) => {
      Object.assign(tableData.value[editIndex.value], editData.value);
      editIndex.value = -1;
      editData.value = {};
    };

    const handleCancelEdit = () => {
      editIndex.value = -1;
      editData.value = {};
    };

    const handleDelete = (row) => {
      tableData.value.splice(tableData.value.indexOf(row), 1);
    };

    const handleSave = () => {
      // 提交表格数据到后台或者更新本地数据
    };

    return {
      tableData,
      editData,
      editIndex,
      handleEdit,
      handleSaveEdit,
      handleCancelEdit,
      handleDelete,
      handleSave,
    };
  },
};
</script>

在上面的代码中，我们使用el-table-plus组件替代el-table，并在el-table-plus的column中设置editable属性为true，表示该列可编辑。在edit-template slot中，我们使用el-input-number组件来自定义编辑时的表单组件。在@save事件中，我们监听保存数据事件，并将数据提交到后台或者更新本地数据。在操作列中，我们使用default slot来显示编辑和删除按钮，使用edit slot来显示保存和取消按钮。在handleEdit方法中，我们保存要编辑的数据到editData中，并将要编辑的行的索引保存到editIndex中。在handleSaveEdit方法中，我们将编辑的数据保存到表格数据中，并清空editIndex和editData。在handleCancelEdit方法中，我们清空editIndex和editData。这样就实现了表格行内的编辑和新增功能。