Vue3+ElementPlus编辑表格数据（指定行变为input）

在Vue3和ElementPlus中，可以使用组件el-table和el-input-number来实现指定行编辑。以下是一个简单的例子，展示如何将表格中的特定行转换为可编辑的输入框：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column label="操作">
      <template #default="{ row, $index }">
        <el-input-number
          v-if="editIndex === $index"
          v-model="row.amount"
          :min="0"
          @keyup.enter="confirmEdit($index)"
        ></el-input-number>
        <span v-else>{{ row.amount }}</span>
        <el-button
          v-if="editIndex !== $index"
          type="text"
          @click="editRow($index, row)"
        >
          编辑
        </el-button>
        <el-button
          v-else
          type="text"
          @click="confirmEdit($index)"
        >
          确认
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  { date: '2021-05-03', name: '张三', amount: 20 },
  { date: '2021-05-04', name: '李四', amount: 30 },
  // ...更多数据
]);
 
const editIndex = ref(null);
 
function editRow(index, row) {
  editIndex.value = index;
}
 
function confirmEdit(index) {
  editIndex.value = null;
}
</script>

在这个例子中，我们使用了el-table-column的template #default来自定义列的内容。通过editIndex来跟踪当前处于编辑状态的行。当用户点击编辑按钮时，我们将editIndex设置为当前行的索引，从而显示el-input-number组件。用户可以直接在输入框中编辑数值，并在按下键盘的Enter键或点击确认按钮后结束编辑状态。