[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> ~~~ 最終實現效果