使用Vue怎么动态生成表格的行和列

这篇文章将为大家详细讲解有关使用Vue怎么动态生成表格的行和列，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

具体的实现代码如下：

<template>  <div class="boxShadow">  <div >    <el-table  :data="tables"  ref="multipleTable"  tooltip-effect="dark"    @selection-change='selectArInfo'>  <el-table-column type="selection" width="45px"></el-table-column>  <el-table-column label="序号" width="62px" type="index">  </el-table-column>  <template v-for='(col) in tableData'>   <el-table-column   sortable   :show-overflow-tooltip="true"   :prop="col.dataItem"   :label="col.dataName"   :key="col.dataItem"   width="124px">   </el-table-column>  </template>  <el-table-column label="操作" width="80" align="center">   <template slot-scope="scope">   <el-button size="mini" class="del-com" @click="delTabColOne()" ><i class="iconfont icon-shanchu"></i></el-button>   </template>  </el-table-column>  </el-table>      </div>  </div>   </template>

<script>  import '../../assets/css/commlist.css'  import '../../assets/css/commscoped.sass'  export default {  data () {  return {  tables: [{   xiaoxue: '福兰',   chuzhong: '加芳',   gaozhong: '蒲庙',   daxue: '西安',   yanjiusheng: '西安',   shangban: '北京'  }, {   xiaoxue: '南坊',   chuzhong: '礼泉',   gaozhong: '礼泉',   daxue: '西安',   yanjiusheng: '西安',   shangban: '南坊'  }, {   xiaoxue: '马山',   chuzhong: '加芳',   gaozhong: '蒲庙',   daxue: '西安',   yanjiusheng: '重庆',   shangban: '北京'  }],  tableData: [{   dataItem: 'xiaoxue',   dataName: '小学'  }, {   dataItem: 'chuzhong',   dataName: '初中'  }, {   dataItem: 'gaozhong',   dataName: '高中'  }, {   dataItem: 'daxue',   dataName: '大学'  }, {   dataItem: 'yanjiusheng',   dataName: '研究生'  }, {   dataItem: 'shangban',   dataName: '上班'  }]  }  },  methods: {  // 获取表格选中时的数据  selectArInfo (val) {  this.selectArr = val  }  }  } </script>

关于使用Vue怎么动态生成表格的行和列就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。