当前位置：首页 > VUE

vue表格实现单行编辑

2026-02-22 05:35:48VUE

Vue 表格实现单行编辑的方法

使用 `v-if` 和 `v-else` 切换显示模式

在表格的每一行中，通过 v-if 和 v-else 控制编辑状态。默认显示文本内容，点击编辑按钮时切换为输入框。

<template>
  <table>
    <tr v-for="(item, index) in tableData" :key="index">
      <td>
        <span v-if="!item.isEditing">{{ item.name }}</span>
        <input v-else v-model="item.name" />
      </td>
      <td>
        <button @click="toggleEdit(item)">
          {{ item.isEditing ? '保存' : '编辑' }}
        </button>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', isEditing: false },
        { name: '李四', isEditing: false },
      ],
    };
  },
  methods: {
    toggleEdit(item) {
      item.isEditing = !item.isEditing;
    },
  },
};
</script>

使用 `v-show` 控制编辑状态

与 v-if 类似，但 v-show 仅切换 CSS 的 display 属性，适合频繁切换的场景。

<template>
  <table>
    <tr v-for="(item, index) in tableData" :key="index">
      <td>
        <span v-show="!item.isEditing">{{ item.name }}</span>
        <input v-show="item.isEditing" v-model="item.name" />
      </td>
      <td>
        <button @click="toggleEdit(item)">
          {{ item.isEditing ? '保存' : '编辑' }}
        </button>
      </td>
    </tr>
  </table>
</template>

结合计算属性实现临时编辑

通过临时变量保存编辑前的数据，避免直接修改原始数据，适合需要取消编辑的场景。

<template>
  <table>
    <tr v-for="(item, index) in tableData" :key="index">
      <td>
        <span v-if="!item.isEditing">{{ item.name }}</span>
        <input v-else v-model="tempEditData.name" />
      </td>
      <td>
        <button @click="startEdit(item)" v-if="!item.isEditing">编辑</button>
        <button @click="saveEdit(item)" v-else>保存</button>
        <button @click="cancelEdit(item)" v-if="item.isEditing">取消</button>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', isEditing: false },
        { name: '李四', isEditing: false },
      ],
      tempEditData: {},
    };
  },
  methods: {
    startEdit(item) {
      this.tempEditData = { ...item };
      item.isEditing = true;
    },
    saveEdit(item) {
      Object.assign(item, this.tempEditData);
      item.isEditing = false;
    },
    cancelEdit(item) {
      item.isEditing = false;
    },
  },
};
</script>

使用第三方表格组件（如 Element UI）

Element UI 的 el-table 组件内置了编辑功能，可以通过插槽自定义编辑逻辑。

vue表格实现单行编辑

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名">
      <template #default="{ row }">
        <span v-if="!row.isEditing">{{ row.name }}</span>
        <el-input v-else v-model="row.name" />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button @click="toggleEdit(row)">
          {{ row.isEditing ? '保存' : '编辑' }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>