Vue動態生成表格的行和列

2019-11-19 11:10:04

字體：大中小

來源：轉載

供稿：網友

當在開發項目的時候，固定的頁面表格標題及內容不能滿足需求，需要根據不同的需求動態加載不同的表格表頭和表格的內容，具體的實現代碼如下：

<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>

實現的效果如下圖所示，這個只是一個小的簡單示例，表格的數據都是寫死的，在我們的項目開發的過程中，我們需要根據自己的開發需求去調用相應的接口，實現相應的表格內容。