vue3 行编辑表格组件封装

Vue 3 提供了更快的数据响应和更好的 TypeScript 支持，我们可以使用 Composition API 来封装一个行编辑表格组件。下面是一个简单的例子：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
        <td v-for="(column, columnIndex) in row" :key="columnIndex">
          <template v-if="!editing[rowIndex][columnIndex]">
            {{ column }}
          </template>
          <template v-else>
            <input v-model="editData[rowIndex][columnIndex]" />
          </template>
        </td>
        <td>
          <button @click="startEdit(rowIndex)">Edit</button>
          <button @click="saveEdit(rowIndex)">Save</button>
          <button @click="cancelEdit(rowIndex)">Cancel</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'EditableTable',
  props: {
    headers: Array,
    data: Array,
  },
  setup(props) {
    const editing = ref(
      Array.from({ length: props.data.length }, () => Array(props.headers.length).fill(false))
    );
    const editData = ref(
      Array.from({ length: props.data.length }, () => Array(props.headers.length).fill(null))
    );
    const rows = ref(props.data);

    function startEdit(rowIndex) {
      editing.value[rowIndex] = Array(props.headers.length).fill(false);
      editing.value[rowIndex][0] = true;
      editData.value[rowIndex] = [...rows.value[rowIndex]];
    }

    function saveEdit(rowIndex) {
      rows.value[rowIndex] = [...editData.value[rowIndex]];
      editing.value[rowIndex] = Array(props.headers.length).fill(false);
    }

    function cancelEdit(rowIndex) {
      editing.value[rowIndex] = Array(props.headers.length).fill(false);
    }

    return {
      rows,
      editing,
      editData,
      startEdit,
      saveEdit,
      cancelEdit,
    };
  },
};
</script>

在这个例子中，我们使用了 `ref` 来定义了 `editing` 和 `editData` 两个响应式变量，分别表示当前每行是否在编辑状态和编辑后的数据。我们使用 `startEdit` 函数来开始编辑某一行，它会将 `editing` 和 `editData` 置为相应的状态。`saveEdit` 函数用于保存编辑后的数据，`cancelEdit` 用于取消编辑。

在模板中，我们使用 `v-if` 来根据当前是否处于编辑状态来显示不同的内容。同时，我们使用 `v-model` 来实现数据的双向绑定。`<button>` 元素用于触发相应的编辑操作。

注意：这只是一个简单的例子，实际应用中可能需要更多的功能和处理。同时，这里只是演示了如何使用 Composition API 来封装一个行编辑表格组件，具体的实现可能会因应用场景而有所不同。