vue实现表格编辑

Vue 实现表格编辑的方法

使用 v-model 绑定数据

在 Vue 中，可以通过 v-model 双向绑定表格数据。创建一个数据数组，绑定到表格的每一行和单元格。编辑时直接修改绑定的数据即可实现实时更新。

<template>
  <table>
    <tr v-for="(row, index) in tableData" :key="index">
      <td v-for="(cell, cellIndex) in row" :key="cellIndex">
        <input v-model="tableData[index][cellIndex]" />
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        ['Cell 1', 'Cell 2'],
        ['Cell 3', 'Cell 4']
      ]
    };
  }
};
</script>

使用动态组件切换

通过动态切换显示和编辑组件，可以实现更复杂的表格编辑功能。点击单元格时切换到输入框，完成编辑后切换回文本显示。

<template>
  <table>
    <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
      <td v-for="(cell, cellIndex) in row" :key="cellIndex">
        <span v-if="!editing[rowIndex][cellIndex]" @click="startEdit(rowIndex, cellIndex)">
          {{ cell }}
        </span>
        <input
          v-else
          v-model="tableData[rowIndex][cellIndex]"
          @blur="endEdit(rowIndex, cellIndex)"
          @keyup.enter="endEdit(rowIndex, cellIndex)"
        />
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        ['Cell 1', 'Cell 2'],
        ['Cell 3', 'Cell 4']
      ],
      editing: [
        [false, false],
        [false, false]
      ]
    };
  },
  methods: {
    startEdit(rowIndex, cellIndex) {
      this.editing[rowIndex][cellIndex] = true;
    },
    endEdit(rowIndex, cellIndex) {
      this.editing[rowIndex][cellIndex] = false;
    }
  }
};
</script>

使用第三方表格组件

对于更复杂的需求，可以使用第三方 Vue 表格组件库，如 Element UI 的 el-table 或 Vuetify 的 v-data-table。这些组件通常内置了编辑功能。

<template>
  <el-table :data="tableData" border>
    <el-table-column prop="name" label="Name">
      <template #default="scope">
        <el-input v-model="scope.row.name" />
      </template>
    </el-table-column>
    <el-table-column prop="age" label="Age">
      <template #default="scope">
        <el-input v-model="scope.row.age" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 20 },
        { name: 'Jane', age: 22 }
      ]
    };
  }
};
</script>

实现行内编辑

行内编辑通常通过点击“编辑”按钮进入编辑模式，保存或取消后退出编辑模式。可以通过添加一个 editingRow 变量来跟踪当前编辑的行。

<template>
  <table>
    <tr v-for="(row, index) in tableData" :key="index">
      <td>
        <span v-if="editingRow !== index">{{ row.name }}</span>
        <input v-else v-model="row.name" />
      </td>
      <td>
        <span v-if="editingRow !== index">{{ row.age }}</span>
        <input v-else v-model="row.age" />
      </td>
      <td>
        <button v-if="editingRow !== index" @click="editRow(index)">Edit</button>
        <button v-else @click="saveRow(index)">Save</button>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 20 },
        { name: 'Jane', age: 22 }
      ],
      editingRow: null
    };
  },
  methods: {
    editRow(index) {
      this.editingRow = index;
    },
    saveRow(index) {
      this.editingRow = null;
    }
  }
};
</script>

使用计算属性优化

对于需要复杂逻辑的表格编辑，可以使用计算属性来优化数据绑定和渲染性能。计算属性可以缓存结果，避免不必要的重新计算。

<template>
  <table>
    <tr v-for="(row, index) in computedTableData" :key="index">
      <td v-for="(cell, cellIndex) in row" :key="cellIndex">
        <input v-model="computedTableData[index][cellIndex]" />
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        ['Cell 1', 'Cell 2'],
        ['Cell 3', 'Cell 4']
      ]
    };
  },
  computed: {
    computedTableData() {
      return this.tableData.map(row => [...row]);
    }
  }
};
</script>