vue 动态生成table行和列

Vue可以通过数据驱动方式动态生成table行和列。首先，在Vue实例中定义一个数组，用来存储table的数据。然后，在模板中使用v-for指令循环该数组，生成table的行。例如：

<template>
  <div>
    <table>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
      <tr v-for="item in dataList" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </table>
    <button @click="addRow">添加行</button>
    <button @click="addColumn">添加列</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 18 },
        { id: 3, name: '王五', age: 22 },
      ]
    }
  },
  methods: {
    addRow() {
      // 在dataList数组中添加一行数据
      this.dataList.push({ id: this.dataList.length + 1, name: '', age: '' });
    },
    addColumn() {
      // 在table的表头中添加一列
      let th = document.createElement('th');
      th.textContent = '性别';
      document.querySelector('tr:first-child').appendChild(th);
      
      // 根据dataList数组中的数据，给每一行添加一列
      let rows = document.querySelectorAll('tr:not(:first-child)');
      rows.forEach(row => {
        let td = document.createElement('td');
        td.textContent = '';
        row.appendChild(td);
      });
    }
  }
}
</script>

在上述代码中，通过v-for指令循环遍历dataList数组，动态生成table的行。通过addRow方法，可以在dataList数组中添加一行数据，从而动态生成一行。通过addColumn方法，可以在table的表头中添加一列，并且根据dataList数组的数据，给每一行添加一列。