Vue动态生成表格的行和列

当在开发项目的时候，固定的页面表格标题及内容不能满足需求，需要根据不同的需求动态加载不同的表格表头和表格的内容，具体的实现代码如下：

<template> <div class="boxShadow"> <div style="margin-top: 20px">   <el-table  :data="tables"  ref="multipleTable"  tooltip-effect="dark"  style="width: 100%"  @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> 

实现的效果如下图所示，这个只是一个小的简单示例，表格的数据都是写死的，在我们的项目开发的过程中，我们需要根据自己的开发需求去调用相应的接口，实现相应的表格内容。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持错新站长站。