在 Vue.js 中，使用 Element UI 的 el-table 组件可以方便地实现添加行、修改行、单独删除行和批量删除行的操作。下面是一个示例：xmlCopy

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="editRow(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="addRow">添加行</el-button>
    <el-button type="danger" @click="deleteSelectedRows" :disabled="selectedRows.length === 0">批量删除</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ],
      showAddDialog: false,
      showEditDialog: false,
      selectedRows: [],
      newRecord: {
        name: '',
        age: null
      },
      editingRecord: null
    }
  },
  methods: {
    addRow() {
      this.showAddDialog = true
    },
    editRow(row) {
      this.editingRecord = Object.assign({}, row)
      this.showEditDialog = true
    },
    deleteRow(row) {
      const index = this.tableData.indexOf(row)
      this.tableData.splice(index, 1)
    },
    deleteSelectedRows() {
      for (const row of this.selectedRows) {
        const index = this.tableData.indexOf(row)
        this.tableData.splice(index, 1)
      }
      this.selectedRows = []
    },
    confirmAdd() {
      this.tableData.push(Object.assign({}, this.newRecord))
      this.showAddDialog = false
      this.newRecord = {
        name: '',
        age: null
      }
    },
    confirmEdit() {
      Object.assign(this.editingRecord, this.selectedRows[0])
      this.showEditDialog = false
      this.editingRecord = null
    }
  },
  computed: {
    addDialogVisible() {
      return this.showAddDialog
    },
    editDialogVisible() {
      return this.showEditDialog
    }
  }
}
</script>

<template>
  <div>
    <el-dialog title="添加行" :visible.sync="addDialogVisible">
      <el-form>
        <el-form-item label="姓名">
          <el-input v-model="newRecord.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="newRecord.age"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmAdd">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑行" :visible.sync="editDialogVisible">
      <el-form>
        <el-form-item label="姓名">
          <el-input v-model="editingRecord.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="editingRecord.age"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="showEditDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

在上面的示例中，我们使用 el-table 组件渲染数据，其中每一行都包含一个“编辑”按钮和一个“删除”按钮。点击“添加行”按钮会打开一个对话框，可以输入新行的数据并确认添加。点击“编辑”按钮会打开一个对话框，可以修改当前行的数据并确认保存。点击“删除”按钮会直接删除当前行。可以通过勾选多行数据来进行批量删除操作。

在组件的 data 选项中，我们定义了以下变量：

• tableData: 存储表格的数据。
• showAddDialog、showEditDialog：控制添加和编辑对话框的显示和隐藏。
• selectedRows：存储当前勾选的行。
• newRecord、editingRecord：存储添加和编辑对话框中的数据。

在组件的 methods 中，我们定义了以下方法：

• addRow：打开添加对话框。
• editRow：打开编辑对话框。
• deleteRow：删除指定行。
• deleteSelectedRows：批量删除勾选的行。
• confirmAdd：确认添加新行。
• confirmEdit：确认编辑当前行。

在组件的 computed 中，我们定义了 addDialogVisible 和 editDialogVisible 计算属性，用于控制添加和编辑对话框的显示状态。

最后，我们在组件的模板中定义了两个对话框，分别用于添加和编辑行的操作。

需要注意的是，以上示例只是一种实现方式，具体的实现方式可能因项目需求而异。