Vue+Element+Table表格动态跨列文章

https://my.oschina.net/u/4772459/blog/4699602

如图所示:

  1 <template class="SysRole">
  2   <div>
  3     <el-table
  4       :data="tableData"
  5       :span-method="arraySpanMethod"
  6       border
  7       style="width: 100%">
  8       <el-table-column
  9         prop="id"
 10         label="ID"
 11         width="180">
 12       </el-table-column>
 13       <el-table-column
 14         prop="name"
 15         label="姓名">
 16       </el-table-column>
 17       <el-table-column
 18         prop="amount1"
 19         sortable
 20         label="数值 1">
 21       </el-table-column>
 22       <el-table-column
 23         prop="amount2"
 24         sortable
 25         label="数值 2">
 26       </el-table-column>
 27       <el-table-column
 28         prop="amount3"
 29         sortable
 30         label="数值 3">
 31       </el-table-column>
 32     </el-table>
 33
 34
 35   </div>
 36 </template>
 37
 38 <script>
 39   export default {
 40     data() {
 41       return {
 42         tableData: [{
 43           id: '12987122',
 44           name: '王小虎',
 45           amount1: '234',
 46           amount2: '3.2',
 47           amount3: 10
 48         },{
 49           id: '12987122',
 50           name: '王小虎',
 51           amount1: '165',
 52           amount2: '4.43',
 53           amount3: 12
 54         }, {
 55           id: '12987122',
 56           name: '王小虎',
 57           amount1: '324',
 58           amount2: '1.9',
 59           amount3: 9
 60         },{
 61           id: '12987122',
 62           name: '王小虎',
 63           amount1: '621',
 64           amount2: '2.2',
 65           amount3: 17
 66         },{
 67           id: '12987122',
 68           name: '王小虎',
 69           amount1: '539',
 70           amount2: '4.1',
 71           amount3: 15
 72         },{
 73           id: '12987122',
 74           name: '王小虎',
 75           amount1: '234',
 76           amount2: '3.2',
 77           amount3: 10
 78         },{
 79           id: '12987122',
 80           name: '王小虎',
 81           amount1: '165',
 82           amount2: '4.43',
 83           amount3: 12
 84         },{
 85           id: '12987122',
 86           name: '王小虎',
 87           amount1: '324',
 88           amount2: '1.9',
 89           amount3: 9
 90         },{
 91           id: '12987122',
 92           name: '王小虎',
 93           amount1: '621',
 94           amount2: '2.2',
 95           amount3: 17
 96         },{
 97           id: '12987122',
 98           name: '王小虎',
 99           amount1: '539',
100           amount2: '4.1',
101           amount3: 15
102         },{
103           id: '12987122',
104           name: '王小虎',
105           amount1: '539',
106           amount2: '4.1',
107           amount3: 15
108         },{
109           id: '12987122',
110           name: '王小虎',
111           amount1: '539',
112           amount2: '4.1',
113           amount3: 15
114         },{
115           id: '12987122',
116           name: '王小虎',
117           amount1: '539',
118           amount2: '4.1',
119           amount3: 15
120         }],
121         colArr1: [6,0,0,0,0,0,6,0,0,0,0,0,1],
122          //第一二列的合并表格单元格,1表示不合并单元格，0表示该行要合并单元格
123       };
124     },
125
126     mounted(){
127       console.log(this.tableData.length)
128     },
129
130     methods: {
131       arraySpanMethod({ row, column, rowIndex, columnIndex }) {
132         //合拼第一二列的行
133         if (columnIndex === 0) {
134           const _row = this.colArr1[rowIndex];
135           const _col = _row > 0 ? 1 : 0;
136           //返回行和列的合拼数
137           return {
138             rowspan: _row,
139             colspan: _col
140           };
141         }
142
143       }
144       },
145
146   };
147 </script>