element-ui表格行或列合并

element-ui表格行或列合并

<el-table ref="tableFormatData.userTable.key"  :span-method="objectSpanMethod" :data="tableFormatData.userTable.tableData">
                <el-table-column label="序号" width="55" align="center" prop="id">
                    <!-- <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span>
                    </template> -->
                </el-table-column>
                <el-table-column label="订单编号" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.bjd }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="委托编号" align="center" width="80">
                    <template slot-scope="scope">
                        <span>{{ scope.row.ypbh }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="产品名称" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.name1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="规格型号" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.name2}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="数量" align="center" width="60">
                    <template slot-scope="scope">
                        <span>{{scope.row.name3}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="单价" align="center" width="70">
                    <template slot-scope="scope">
                        <span>{{ scope.row.price }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="物流信息" align="center">
                    <template slot-scope="scope">
                        <p>顺丰快递</p>
                        <p>JD0015972285147</p>
                    </template>
                </el-table-column>
                <el-table-column label="报检日期" align="center" width="100">
                    <template slot-scope="scope">
                        <span>2020-04-27</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center" width="70">
                    <template slot-scope="scope">
                        <span>{{activeTaskTxt[activeTaskName]}}</span>
                    </template>
                </el-table-column>
            </el-table>

data:

tableData: [{
                            id: '1',
                            bjd: 'BJ20200521001',
                            ypbh: '000001',
                            price: 20,
                            name1: '防火门',
                            name2: '2018-11-14',
                            name3: '14'
                        },
                        {
                            id: '1',
                            bjd: 'BJ20200521001',
                            ypbh: '000002',
                            price: 20,
                            name1: '防火门',
                            name2: '',
                            name3: ''
                        },
                        {
                            id: '2',
                            bjd: 'BJ20200521002',
                            ypbh: '000004',
                            price: 20,
                            name1: '防火门',
                            name2: '14',
                            name3: ''
                        },
                        {
                            id: '2',
                            bjd: 'BJ20200521002',
                            ypbh: '000003',
                            price: 40,
                            name1: '防火门',
                            name2: '2018-11-14',
                            name3: '14'
                        }
                    ],

js:

mounted() {
	// 合并表格
        var contactDot = 0
        var ront = 0
        const newTabdata = this.tableFormatData.userTable.tableData
        this.tableFormatData.userTable.tableData.forEach((item, index) => {
            console.log(item, index, 'f')

            //合并行
            console.log(item.name2.length, 'item.name2.length')
            if (item.name2.length !== 0 && item.name3.length === 0) {
                this.trArr.push(1)
            } else if (item.name2.length === 0 && item.name3.length === 0) {
                this.trArr.push(2)
            } else {
                this.trArr.push(0)
            }
		//合并列。根据bjd合并
            if (index === 0) {
                this.spanArr.push(1)
            } else {
                // 遍历需要合并的名字 bjd
                if (item.bjd === newTabdata[index - 1].bjd) {
                    this.spanArr[contactDot] += 1
                    this.spanArr.push(0)
                } else {
                    contactDot = index
                    this.spanArr.push(1)
                }
            }
        })
 }
 objectSpanMethod({
            row,
            column,
            rowIndex,
            columnIndex
        }) {
            // console.log(rowIndex, columnIndex)
            var hbArr=null,hbArr5=null,hbArr6=null
            this.trArr.map((item, index) => {
                if (columnIndex === 3 && (rowIndex === index)) {
                    if (item === 2) {
                        hbArr={
                            rowspan: 1,
                            colspan: 3
                        }
                    }
                }
                if (columnIndex === 4 && (rowIndex === index)) {
                    if (item === 1) {
                        hbArr5={
                            rowspan: 1,
                            colspan: 2
                        }
                    }
                    if (item === 2) {
                        hbArr5={
                            rowspan: 0,
                            colspan: 0
                        }
                    }
                }
                if (columnIndex === 5 && (rowIndex === index)) {
                    if (item === 1) {
                        hbArr6={
                            rowspan: 0,
                            colspan: 0
                        }
                    }
                    if (item === 2) {
                        hbArr6={
                            rowspan: 0,
                            colspan: 0
                        }
                    }
                }
            })
            // 返回合并列，合并3.4.5列的空数据
            if (columnIndex===3&&hbArr) {
                console.log(hbArr, 'hbArr')
                return hbArr
            }
            if (columnIndex===4&&hbArr5) {
                console.log(hbArr5, 'hbArr5')
                return hbArr5
            }
            if (columnIndex===5&&hbArr6) {
                console.log(hbArr6, 'hbArr6')
                return hbArr6
            }

            // columnIndex 0 就是第0列，后面相对改，合并第 0,1,2列相同数据
            if (columnIndex === 0) {
                if (this.spanArr[rowIndex]) {
                    return {
                        rowspan: this.spanArr[rowIndex],
                        colspan: 1
                    }
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    }
                }
            }
            if (columnIndex === 1) {
                if (this.spanArr[rowIndex]) {
                    return {
                        rowspan: this.spanArr[rowIndex],
                        colspan: 1
                    }
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    }
                }
            }
            if (columnIndex === 2) {
                if (this.spanArr[rowIndex]) {
                    return {
                        rowspan: this.spanArr[rowIndex],
                        colspan: 1
                    }
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    }
                }
            }
        },