通过在Vue中输入数字来立即更改表的列和行

<template>
  <div>
    <label for="columns">列数：</label>
    <input type="number" id="columns" v-model="numColumns" />
    <br />
    <label for="rows">行数：</label>
    <input type="number" id="rows" v-model="numRows" />
    <br />
    <table>
      <tr v-for="row in numRows" :key="row">
        <td v-for="column in numColumns" :key="column">{{ row }} - {{ column }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numColumns: 0,
      numRows: 0,
    };
  },
};
</script>

<script>
export default {
  data() {
    return {
      numColumns: 0,
      numRows: 0,
    };
  },
  computed: {
    tableData() {
      const data = [];
      for (let row = 1; row <= this.numRows; row++) {
        const rowData = [];
        for (let column = 1; column <= this.numColumns; column++) {
          rowData.push(`${row} - ${column}`);
        }
        data.push(rowData);
      }
      return data;
    },
  },
};
</script>