当前位置：首页 > VUE

vue表格实现单行编辑

2026-01-21 14:13:49VUE

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

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

在表格的每一行中，可以通过 v-if 和 v-else 切换显示模式和编辑模式。定义一个状态变量（如 editingId）来标记当前正在编辑的行。

<template>
  <table>
    <tr v-for="item in items" :key="item.id">
      <td v-if="editingId !== item.id">{{ item.name }}</td>
      <td v-else><input v-model="item.name" /></td>
      <td>
        <button @click="startEditing(item.id)" v-if="editingId !== item.id">编辑</button>
        <button @click="saveEditing(item)" v-else>保存</button>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ],
      editingId: null
    }
  },
  methods: {
    startEditing(id) {
      this.editingId = id;
    },
    saveEditing(item) {
      this.editingId = null;
      // 调用 API 保存数据
    }
  }
}
</script>

使用动态组件切换显示和编辑

通过动态组件 (component) 和 is 属性，可以更灵活地切换显示和编辑模式。定义两个组件分别用于显示和编辑。

<template>
  <table>
    <tr v-for="item in items" :key="item.id">
      <td>
        <component
          :is="editingId === item.id ? 'edit-cell' : 'view-cell'"
          :item="item"
          @edit="startEditing(item.id)"
          @save="saveEditing(item)"
        />
      </td>
    </tr>
  </table>
</template>

<script>
import ViewCell from './ViewCell.vue';
import EditCell from './EditCell.vue';

export default {
  components: { ViewCell, EditCell },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ],
      editingId: null
    }
  },
  methods: {
    startEditing(id) {
      this.editingId = id;
    },
    saveEditing(item) {
      this.editingId = null;
      // 调用 API 保存数据
    }
  }
}
</script>

使用第三方表格库

如果项目中使用第三方表格库（如 Element UI 或 Ant Design Vue），可以直接利用其内置的编辑功能。例如，Element UI 的 el-table 支持通过 scope.row 实现行内编辑。

<template>
  <el-table :data="items">
    <el-table-column prop="name" label="Name">
      <template #default="scope">
        <el-input v-if="scope.row.editing" v-model="scope.row.name" />
        <span v-else>{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="Action">
      <template #default="scope">
        <el-button @click="toggleEditing(scope.row)">
          {{ scope.row.editing ? '保存' : '编辑' }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', editing: false },
        { id: 2, name: 'Item 2', editing: false }
      ]
    }
  },
  methods: {
    toggleEditing(row) {
      row.editing = !row.editing;
      if (!row.editing) {
        // 调用 API 保存数据
      }
    }
  }
}
</script>

使用 Vuex 管理编辑状态

对于大型项目，可以通过 Vuex 集中管理编辑状态，避免状态分散在多个组件中。

vue表格实现单行编辑

// store.js
export default new Vuex.Store({
  state: {
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' }
    ],
    editingId: null
  },
  mutations: {
    startEditing(state, id) {
      state.editingId = id;
    },
    saveEditing(state, item) {
      state.editingId = null;
      // 更新数据
    }
  }
});

<template>
  <table>
    <tr v-for="item in $store.state.items" :key="item.id">
      <td v-if="$store.state.editingId !== item.id">{{ item.name }}</td>
      <td v-else><input v-model="item.name" /></td>
      <td>
        <button @click="$store.commit('startEditing', item.id)" v-if="$store.state.editingId !== item.id">编辑</button>
        <button @click="$store.commit('saveEditing', item)" v-else>保存</button>
      </td>
    </tr>
  </table>
</template>