Vue使用ElementUI-Table动态扩展行和列，循环遍历表头和表体

1.引入table组件

我们在使用jquery的时候可以很方便的动态追加删除table行和列，确实vue也是可以的，
思路：首先我们需要定义两个数组，一个用于处理table标题，一个用于处理table内容，通过修改两个数组，达到动态显示table的效果，skuTableTitle直接用于title的显示，skuTableRow赋值给原生vue组件的：data属性，它会帮我们自动渲染表格

<el-tabs type="border-card">
            <el-button type="primary" @click="handAddTitle()" round
              >添加标题</el-button
            >
            <el-button type="danger" @click="handleDeleteTitle(2)" round
              >删除标题</el-button
            >
            <el-button type="primary" @click="handAddRow()" round
              >添加行</el-button
            >
            <el-button type="danger" @click="handleDeleteRow(2)" round
              >删除行</el-button
            >
            <el-tab-pane label="商品SKU">
              <el-table :data="skuTableRow" border style="width: 100%">
                  <el-table-column
                    v-for="title in skuTableTitle"
                    :prop="title.prop"
                    :label="title.label"
                    align="center"
                    :key="title.prop"
                  >
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.name"> </el-input>
                  </template>
                  </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>

 data() {
    return {
     skuTableTitle: [
        {
          prop: "list1",
          label: "第一列",
        },
        {
          prop: "list2",
          label: "第二列",
        },
      ],
      skuTableRow: [{
          name: "张三",
          age: "12",
        },
        {
          prop: "李四",
          label: "13",
        },
        {
          prop: "王五",
          label: "30",
        },
        {
          prop: "赵六",
          label: "32",
        }],
    }
 }

2,编写script方法

handAddTitle() {
      this.skuTableTitle.push({
          prop: "listn",
          label: "第n列",
      });
    },
    handleDeleteTitle(index) {
      this.skuTableTitle.splice(index, 1);
    },
    handAddRow(){
      this.skuTableRow.push({
          name: "张三",
          age: "12",
      })
    },
    handleDeleteRow(index){
        this.skuTableRow.splice(index, 1);
    }

3.运行结果