vue实现一个可编辑表格

首先，我们可以使用Vue.js创建一个表格组件。然后，我们可以使用`v-for`指令来生成表格的行和列。每个单元格都可以绑定一个数据属性，以便我们可以在编辑时更新它们。

下面是一个简单的示例：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">
          <span v-if="!editing[rowIndex] || editing[rowIndex][cellIndex] !== true">{{ cell }}</span>
          <input v-else type="text" v-model="rows[rowIndex][cellIndex]" @blur="save(rowIndex, cellIndex)">
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    headers: Array,
    rows: Array
  },
  data() {
    return {
      editing: []
    };
  },
  methods: {
    edit(rowIndex, cellIndex) {
      if (!this.editing[rowIndex]) {
        this.editing[rowIndex] = [];
      }
      this.editing[rowIndex][cellIndex] = true;
    },
    save(rowIndex, cellIndex) {
      this.editing[rowIndex][cellIndex] = false;
    }
  }
};
</script>

在这个例子中，我们传递了一个`headers`数组和一个`rows`数组作为props，它们分别表示表格的表头和内容。我们使用`v-for`指令来遍历这些数组并生成表格的行和列。

每个单元格都有一个`editing`数组，用于跟踪哪些单元格正在编辑。当用户单击一个单元格时，我们将其标记为正在编辑，并将其内容替换为一个输入框。当用户完成编辑并失去焦点时，我们将其内容保存回到数据中，并将其标记为非编辑状态。

这个示例只是一个基本的实现，你可以根据自己的需求对其进行调整和扩展。