使用Vue如何动态生成表格的行和列

这篇文章主要介绍“使用Vue如何动态生成表格的行和列”，在日常操作中，相信很多人在使用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如何动态生成表格的行和列”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！