vue+element-ui实现表格编辑的三种实现方式

1. 方式一：基于element-ui table组件的行内编辑功能

element-ui提供了table组件可供开发者使用，在table组件中，只需设置editable属性为true，就能实现行内编辑的功能。同时，通过监听table组件的@cell-click事件，就可以在用户单击单元格时进行编辑

具体示例代码如下：

<!-- template -->
<template>
  <el-table :data="tableData" @cell-click="handleCellClick">
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="年龄" prop="age"></el-table-column>
    <el-table-column label="地址" prop="address"></el-table-column>
  </el-table>
</template>

<script>
// script
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市海淀区' },
        { name: '李四', age: 20, address: '上海市黄浦区' },
        { name: '王五', age: 22, address: '广东省深圳市南山区' }
      ],
      editable: false  // 初始设置为不可编辑
    }
  },
  methods: {
    handleCellClick(row, column, cell, event) {  // 监听cell-click事件
      if (this.editable === false) {   // 如果不是可编辑状态，则什么都不做，退出函数
        return
      }
      this.$nextTick(() => {   // 在下一个 tick 时进行编辑，此处使用了nextTick方法
        const editableCell = cell.getElementsByTagName('input')[0]   // 获取当前单元格的可编辑元素
        editableCell.focus()  // 将光标设置到可编辑元素中
      })
    }
  }
}
</script>

1. 方式二：基于element-ui dialog组件的表格编辑功能

如果需要实现编辑后保存的功能，我们可以使用dialog组件来创建编辑表单。

具体示例代码如下：

<!-- template -->
<template>
  <div>
    <el-table :data="tableData">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" @click="showDialog(scope.$index)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible" title="编辑">
      <el-form ref="editForm" :model="editForm" label-width="100px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="editForm.age"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="editForm.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// script
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市海淀区' },
        { name: '李四', age: 20, address: '上海市黄浦区' },
        { name: '王五', age: 22, address: '广东省深圳市南山区' }
      ],
      dialogVisible: false,   // 标记dialog是否可见
      editForm: {}   // 保存当前正在编辑的表单数据
    }
  },
  methods: {
    showDialog(editIndex) {   // 显示dialog编辑框
      this.dialogVisible = true
      this.editForm = Object.assign({}, this.tableData[editIndex])
    },
    submitForm(formName) {    // 保存表单数据
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const editIndex = this.tableData.findIndex((item) => item.name === this.editForm.name)
          this.tableData.splice(editIndex, 1, this.editForm)   // 替换当前编辑的表单数据
          this.dialogVisible = false
        }
      })
    }
  }
}
</script>

1. 方式三：基于vue3的实现

在vue3中，我们可以通过<template v-for>的每个列表项绑定一个状态来实现表格编辑功能。

具体示例代码如下：

<!-- template -->
<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
        <th>编辑</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(rowData, rowIndex) in tableData" :key="rowIndex">
        <td :class="{ 'table-editing': rowData.editing }">
          <span v-if="!rowData.editing">{{ rowData.name }}</span>
          <span v-else>
            <input type="text" v-model="rowData.name" @blur="toggleRowEditStatus(rowIndex)">
          </span>
        </td>
        <td :class="{ 'table-editing': rowData.editing }">
          <span v-if="!rowData.editing">{{ rowData.age }}</span>
          <span v-else>
            <input type="number" v-model.number="rowData.age" @blur="toggleRowEditStatus(rowIndex)">
          </span>
        </td>
        <td :class="{ 'table-editing': rowData.editing }">
          <span v-if="!rowData.editing">{{ rowData.address }}</span>
          <span v-else>
            <input type="text" v-model="rowData.address" @blur="toggleRowEditStatus(rowIndex)">
          </span>
        </td>
        <td>
          <button v-if="!rowData.editing" @click="toggleRowEditStatus(rowIndex)">编辑</button>
          <button v-else @click="saveRowData(rowIndex)">保存</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
// script
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市海淀区', editing: false },
        { name: '李四', age: 20, address: '上海市黄浦区', editing: false },
        { name: '王五', age: 22, address: '广东省深圳市南山区', editing: false }
      ]
    }
  },
  methods: {
    toggleRowEditStatus(rowIndex) {   // 切换当前行的编辑状态
      this.tableData[rowIndex].editing = !this.tableData[rowIndex].editing
    },
    saveRowData(rowIndex) {   // 保存当前行的数据
      this.tableData[rowIndex].editing = false
    }
  }
}
</script>

以上就是三种vue+element-ui实现表格编辑的方式示例。