element 合并表格
objectSpanMethod({ row, column, rowIndex, columnIndex }) { // console.log(row) // console.log(column) // console.log(rowIndex) // console.log(columnIndex)
//0 代表表格的第一项 if ([0].includes(columnIndex)) { let rowspan = this.cell[rowIndex]; let colspan = rowspan > 0 ? 1 : 0; return { rowspan, colspan }; } }, // 合并单元格 mergeCell(datas) { // console.log(datas) let list = [], index = 0; for (let i = 0; i < datas.length; i++) { list[i]; if (!i) { index = 0; list.push(1); } else { // title 自己更换唯一的值 if (datas[i].spec_value[0].id == datas[i - 1].spec_value[0].id) { list[index] += 1; list.push(0); } else { list.push(1); index = i; } } } this.cell = list; },
<el-table :data="tableData" border style="width:1110px;" :span-method="objectSpanMethod" > <el-table-column align="center" :key="col.prop" :label="col.name" :prop="String(col.prop)" v-for="col in cols" > </el-table-column> <el-table-column label="状态" v-if="tableData.length > 0" width="100" align="center" > <template slot-scope="scope"> {{ scope.row.is_online == 2 ? "启用" : "禁用" }} </template> </el-table-column> <el-table-column label="操作" v-if="tableData.length > 0" width="200" align="center" > <template slot-scope="scope"> <el-button @click="editAttr(scope.row)" size="mini" type="text" > 属性设置 </el-button> <el-button @click="editImg(scope.row)" size="mini" type="text" > 图组设置 </el-button> <el-button @click="editStatus(scope.row)" size="mini" type="text" > {{ scope.row.is_online == 2 ? "禁用" : "启用" }} </el-button> </template> </el-table-column> </el-table>
that.mergeCell(that.tableData);
不求大富大贵,但求一生平凡