vue3封装带有input的输入空表格

在 Vue3 中，如果你想创建一个封装了包含 input 的空表格组件，通常会使用模板、数据绑定和事件处理。以下是一个简单的例子：

<template>
  <div class="empty-table-container">
    <table ref="table" :data="tableData" @input="handleInput">
      <thead>
        <tr>
          <!-- 表头内容 -->
          <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in tableData track by $index" :key="$index">
          <td v-for="(cell, cellIndex) in row" :key="cellIndex">
            <input type="text" :value="cell" v-model="tableData[$index][cellIndex]" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [[]], // 初始化为空数组，可以自定义初始结构
      headers: [], // 表格表头
      isEditing: false, // 初始状态下是否允许编辑
    };
  },
  methods: {
    handleInput(e) {
      const { target } = e;
      if (target && target.tagName === 'INPUT') {
        const row = this.$refs.table.data.rows[this.$refs.table.currentRow];
        const col = Array.from(target.parentNode.children).indexOf(target);
        row[col] = target.value; // 更新单元格值
      }
    },
  },
};
</script>

<style scoped>
.empty-table-container {
  /* 样式可以根据需求自定义 */
}
</style>

在这个例子中：
- `tableData` 和 `headers` 是数据属性，用于存储表格的数据和列名。
- 使用 `v-model` 将 `<input>` 的值双向绑定到数据中，当用户修改 input 时，`handleInput` 方法会被触发更新数据。
- `isEditing` 可以控制是否允许用户直接在页面上编辑表格。