vue3 + element plus 实现行内编辑el-table的某列数据并保存

vue3 + element plus 行内编辑el-table的某列数据并保存

需求

试想有这么一个需求：

1. 你使用了一个element plus 的 el-table组件
2. 你要改的数据不多，就那么一两列
3. 但是实际上有很多列数据（columns很多）

这时，再去写一个二级界面是很费事的。（例如模态框dialog，一个表单，数据回显，其它很多的数据只显示禁用编辑，只有那么一两列才能编辑，提交又只提交那么一两列涉及的数据）

实现效果

省去多余的二级界面，省去多余的回显逻辑，直接在行内编辑某一列数据即可！

效果如下：

1. 编辑前
   

2. 编辑中
   

3. 保存编辑
   

实现源码

<template>
  <div>
    <el-table :data="tableData" border>
      <el-table-column prop="name" label="名字"></el-table-column>
      <el-table-column label="年龄">
        <template #default="scope">
          <span v-show="scope.$index !== editIndex">{{ scope.row.value }}</span>
          <el-input v-show="scope.$index === editIndex" v-model="scope.row.value"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="Operate">
        <template #default="{ row }">
          <el-button link @click="editRow(row)">编辑</el-button>
          <el-button type="primary" link @click="saveEditRow">保存</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tableData = ref([
  {
    name: 'Tom',
    value: '18'
  },
  {
    name: 'jerry',
    value: '20'
  },
  {
    name: 'Mr.Li',
    value: '33'
  },
  {
    name: 'Miss Li',
    value: '26'
  }
])
const editIndex = ref(-1)

const editRow = (row) => {
  editIndex.value = tableData.value.indexOf(row)
}

const saveEditRow = () => {
  editIndex.value = -1
  console.log(tableData.value)
}
</script>