当在开发项目的时候，固定的页面表格标题及内容不能满足需求，需要根据不同的需求动态加载不同的表格表头和表格的内容，具体的实现代码如下：
<template> <div> <div> <el-table :data="tables" ref="multipleTable" tooltip-effect="dark" @selection-change='selectArInfo'> <el-table-column type="selection"></el-table-column> <el-table-column label="序号" 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"> </el-table-column> </template> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" @click="delTabColOne()" ><i></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>
实现的效果如下图所示，这个只是一个小的简单示例，表格的数据都是写死的，在我们的项目开发的过程中，我们需要根据自己的开发需求去调用相应的接口，实现相应的表格内容。
