[TOC] >[success] # element ui表格列相同解决办法  需求：原型图设计了，多列名称相同，并且序号是从 **1 - 50 的顺序** ，我们都知道正常表格是实现不了这个效果的，现在有 **2种思路 ：1. 画5个表格然后把数据拆分成5份， 2. 格式化数据，致使每列数据的名称都不一样** ，就可以了，接下来我们实现的是 **第 2 种**。 **vue代码如下** ~~~ <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="index1" label="序号" width="100"></el-table-column> <el-table-column prop="name1" label="构件名称" width="100"></el-table-column> <el-table-column prop="index2" label="序号" width="100"></el-table-column> <el-table-column prop="name2" label="构件名称" width="100"></el-table-column> <el-table-column prop="index3" label="序号" width="100"></el-table-column> <el-table-column prop="name3" label="构件名称" width="100"></el-table-column> <el-table-column prop="index4" label="序号" width="100"></el-table-column> <el-table-column prop="name4" label="构件名称" width="100"></el-table-column> <el-table-column prop="index5" label="序号" width="100"></el-table-column> <el-table-column prop="name5" label="构件名称" width="100"></el-table-column> </el-table> </template> <script> export default { data() { return { lineNum: 10, // 行数 tableData: [], // 10行数据 indexArr: [ // 10 行数据的下标 // 第一行下标 [0, 10, 20, 30, 40], // 第二行下标 [1, 11, 21, 31, 41], // 第三行下标 [2, 12, 22, 32, 42], // 第四行下标 [3, 13, 23, 33, 43], // 第五行下标 [4, 14, 24, 34, 44], // 第六行下标 [5, 15, 25, 35, 45], // 第七行下标 [6, 16, 26, 36, 46], // 第八行下标 [7, 17, 27, 37, 47], // 第九行下标 [8, 18, 28, 38, 48], // 第10行下标 [9, 19, 29, 39, 49] ] } }, created(){ this.getTableData() }, methods:{ getTableData(){ // 模拟后台接口返回的数据 let arr = [ '我是1', '我是2', '我是3', '我是4', '我是5', '我是6', '我是7', '我是8', '我是9', '我是10', '我是11', '我是12', '我是13', '我是14', '我是15', '我是16', '我是17', '我是18', '我是19', '我是20', '我是21', '我是22', '我是23', '我是24', '我是25', '我是26', '我是27', '我是28', '我是29', '我是30', '我是31', '我是32', '我是33', '我是34', '我是35', '我是36', '我是37', '我是38', '我是39', '我是40', '我是41', '我是42', '我是43', '我是44', '我是45', '我是46', '我是47', '我是48', '我是49', '我是50' ] for(let i=0;i<50;i++){ // 循环数据总条数50条，50条必须写死，根据表格固定显示数据而定 for(let k=0;k<this.lineNum;k++){ // 循环行数，默认10行 // 是否存在 let isExistIdx = this.indexArr[k].indexOf(i) if(isExistIdx !== -1){ if(!this.tableData[k]) this.tableData[k] = {} this.tableData[k][`index${isExistIdx + 1}`] = i+1 this.tableData[k][`name${isExistIdx + 1}`] = arr[i] || '' } } } } } } </script> ~~~ 最终实现效果