表格列的合并

+ View Code?

<el-table

          ref="multipleTable"

          :data="tableData"

          border

          fit

          :header-cell-style="{color:'#303133',fontSize:'14px',fontWeight:'normal'}"

          :cell-style="{color:'#303133',fontSize:'14px',fontWeight:'normal'}"

          :span-method="arraySpanMethod"

          style="width:680;"

        >

          <el-table-column

            label="保养种类"

            prop="maintenanceType"

            align="center"

            width="100"

          />

          <el-table-column

            label="保养项目"

            prop="maintenanceProgram"

            align="center"

            width="100"

          />

          <el-table-column

            label="保养机构/部位"

            align="center"

            prop="parts"

            width="160"

          />

          <el-table-column

            label="合格基准"

            align="center"

            prop="qualified"

            width="160"

          />

          <el-table-column

            label="保养结果"

            align="center"

            prop="results"

            width="158"

          />

        </el-table>

　　

?

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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132

<script> import { deviceMaintenanceCardPrint } from '@/api/vue-deviceMaintenanceCard.js' export default {   name: 'MaintenanceCardPrint',   data() {     return {       cardName: '', // 计划名称       tableData: [],       needMergeArr: ['maintenanceType', 'maintenanceProgram', 'qualified'], // 有合并项的列       rowMergeArrs: {} // 包含需要一个或多个合并项信息的对象     }   },   created() {     this.deviceMaintenanceCardPrint(this.$route.query.id)   },   methods: {     // 设置表头     getRowClass() {       return 'background:#F1F6FF;color: rgba(0,0,0,.85);font-weight:400'     },     /**      * 设置样式      */     tabRowClassName({ row, rowIndex }) {       const index = rowIndex + 1       if (index % 2 === 0) {         return 'warning-row'       }     },     /**      * 打印详情页面      */     deviceMaintenanceCardPrint(id) {       deviceMaintenanceCardPrint({         id: id       }).then((res) => {         if (res.code === '0') {           // 处理数据           res.data.cardDetail.forEach((item, index) => {             this.$set(item, 'results', '')           })           this.cardName = res.data.cardName // 保养计划名称           this.tableData = res.data.cardDetail           this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData) // 处理数据         } else {           this.$message({             type: 'error',             message: res.message           })         }       })     },     /**       * @description 实现合并行或列       * @param row:Object 需要合并的列name 如:'name' 'id'       * @param column:Object 当前行的行数，由合并函数传入       * @param rowIndex:Number 当前列的数据，由合并函数传入       * @param columnIndex:Number 当前列的数据，由合并函数传入       *       * @return 函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象       * 参考地址：https://element.eleme.cn/#/zh-CN/component/table#table-biao-ge      */     arraySpanMethod({ row, column, rowIndex, columnIndex }) {       if (this.needMergeArr.includes(column.property)) return this.mergeAction(column.property, rowIndex, column)     },     /**       * @description 根据数组来确定单元格是否需要合并       * @param val:String 需要合并的列name 如:'name' 'id'       * @param rowIndex:Number 当前行的行数，由合并函数传入       * @param colData:Object 当前列的数据，由合并函数传入       *       * @return 返回值为一个数组表示该单元格是否需要合并; 说明: [0,0]表示改行被合并了 [n+,1]n为1时表示该单元格不动,n大于1时表示合并了N-1个单元格     */     mergeAction(val, rowIndex, colData) {       const _row = this.rowMergeArrs[val].rowArr[rowIndex]       const _col = _row > 0 ? 1 : 0       return [_row, _col]     },     /**       * @description 根据数组将指定对象转化为相应的数组       * @param arr:Array[String] 必填 必须是字符串形式的数组       * @param data:Array 必填 需要转化的对象       *       * @return 返回一个对象       * 例：rowMerge(['name','value'], [{value:'1', name:'小明'}, {value:'2', name:'小明'}, {value:'3', name:'小明'}, {value:'1', name:'小明'}, {value:'1', name:'小明'}])       * 返回值: {       *    name:{       *      rowArr: [5, 0, 0, 0, 0]       *      rowMergeNum: 0,       *    },       *    value: {       *       rowArr: [1, 1, 1, 2, 0],       *       rowMergeNum: 3       *     }       *   }     */     rowMergeHandle(arr, data) {       if (!Array.isArray(arr) && !arr.length) return false       if (!Array.isArray(data) && !data.length) return false       const needMerge = {}       arr.forEach(i => {         needMerge[i] = {           rowArr: [],           rowMergeNum: 0         }         data.forEach((item, index) => {           if (index === 0) {             needMerge[i].rowArr.push(1)             needMerge[i].rowMergeNum = 0           } else {             if (item[i] === data[index - 1][i]) {               needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1               needMerge[i].rowArr.push(0)             } else {               needMerge[i].rowArr.push(1)               needMerge[i].rowMergeNum = index             }           }         })       })       return needMerge     },     /**      * 打印功能展示      */     PrintRow() {       this.$print(this.$refs.print)     }     } } </script>