vue原生通过输入行列数生成可编辑表格

可以通过以下步骤来实现原生Vue组件生成可编辑表格：

1. 创建一个Vue组件，命名为EditableTable，并在模板中声明一个表格的基本结构，包括表头和表格体。

2. 添加data属性，用于存储表格的行和列，以及表格中每个单元格的值。

3. 在组件的mounted生命周期中，使用v-for指令循环生成表格的行和列，并将每个单元格的值绑定到data属性中。

4. 添加一个方法，用于更新表格中单元格的值。该方法将会在单元格被编辑后被调用。

5. 在模板中为每个单元格添加一个input元素，并使用v-model指令双向绑定单元格的值。

6. 添加一个按钮，用于提交表格中的数据。

完整代码示例：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="col in cols">{{ col }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
          <td v-for="(col, colIndex) in cols" :key="colIndex">
            <input type="text" v-model="data[rowIndex][colIndex]" @input="updateCellValue(rowIndex, colIndex, $event.target.value)">
          </td>
        </tr>
      </tbody>
    </table>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: 3,
      cols: 3,
      data: [],
    };
  },
  mounted() {
    for (let i = 0; i < this.rows; i++) {
      this.data.push(new Array(this.cols).fill(''));
    }
  },
  methods: {
    updateCellValue(rowIndex, colIndex, value) {
      this.data[rowIndex][colIndex] = value;
    },
    submit() {
      console.log(this.data);
    },
  },
};
</script>

在上述代码中，我们通过双向绑定v-model指令来实现单元格的可编辑性，并通过@input事件来更新data属性中单元格的值。最后通过submit方法来提交表格中的数据。