合并el-table相同行为一列

17 篇文章 0 订阅

在这里插入图片描述

<el-table :data="tableData" border  :span-method="objectSpanMethod">
	<el-table-column prop="province" label="省" width="auto" align="center"></el-table-column>
	<el-table-column prop="city" label="市" width="auto" align="center"></el-table-column>
	<el-table-column prop="area" label="县(区)" width="auto" align="center"></el-table-column>
	<el-table-column prop="sealedArea" label="管控区域" width="240" align="center">
		<template #default="{row}">
			<span>{{row.status===1?'(封控区)':row.status===2?'(管控区)':'(防范区)'{{row.sealedArea}}
			</span>
		</template>
	</el-table-column>
	<el-table-column prop="centralizedIsolation" label="居家观察" align="center"></el-table-column>
	<el-table-column prop="homeQuarantine" label="日常监测" align="center"></el-table-column>
	<el-table-column prop="dailyMonitoring" label="日常监测" align="center"></el-table-column>
	<el-table-column prop="fortyEight" label="48小时内核酸阴性证明" align="center"></el-table-column>
	<el-table-column prop="retroactiveDate" label="追溯日期" align="center"></el-table-column>
	<el-table-column label="操作" fixed="right" width="180" align="center">
		<template v-slot="scope">
			<el-button type="text" size="small">修改</el-button>
			<el-button type="text" size="small">删除</el-button>
		</template>
	</el-table-column>
</el-table>
tableData: [
                {
                    province: "浙江省",
                    city: "杭州市",
                    area: '余杭区',
                    sealedArea: '良渚街道:顾家埠121-122号。',
                    centralizedIsolation: '14天',
                    homeQuarantine: '7天',
                    dailyMonitoring: '',
                    fortyEight: '',
                    retroactiveDate: '4月20日',
                    status:1
                },
                {
                    province: "浙江省",
                    city: "杭州市",
                    area: '余杭区',
                    sealedArea: '良渚街道:顾家埠115-120、123-136号。',
                    centralizedIsolation: '',
                    homeQuarantine: '3天',
                    dailyMonitoring: '11天',
                    fortyEight: '',
                    retroactiveDate: '4月20日',
                    status:2
                },
                {
                    province: "浙江省",
                    city: "杭州市",
                    area: '余杭区',
                    sealedArea: '良渚街道:顾家埠小区除封控区、管控区以外的区域。',
                    centralizedIsolation: '',
                    homeQuarantine: '3天',
                    dailyMonitoring: '11天',
                    fortyEight: '',
                    retroactiveDate: '4月20日',
                    status:3
                },
                {
                    province: "浙江省",
                    city: "杭州市",
                    area: '上城区',
                    sealedArea: '笕桥街道钱塘白石嘉苑16幢,笕桥街道黄家社区一区1-2号',
                    centralizedIsolation: '14天',
                    homeQuarantine: '7天',
                    dailyMonitoring: '',
                    fortyEight: '',
                    retroactiveDate: '4月20日',
                    status:1
                },
                {
                    province: "浙江省",
                    city: "杭州市",
                    area: '上城区',
                    sealedArea: '黄家社区一区、二区(除封控区外),仁爱路-九沙大道-杭乔路-金禾街-九睦路-九乔街合围区域(除封控区外),九堡街道鑫运时代金座15幢。九堡街道金雅苑2幢234单元和13.4幢。',
                    centralizedIsolation: '',
                    homeQuarantine: '3天',
                    dailyMonitoring: '11天',
                    fortyEight: '',
                    retroactiveDate: '4月20日',
                    status:2
                },
                {
                    province: "浙江省",
                    city: "杭州市",
                    area: '上城区',
                    sealedArea: '东湖高架路-德胜东路-和睦港-钱塘快速路合围区域(除封控、管控区):九堡街道鑫运时代金座234幢:金雅苑小区(除封控、管控区外)',
                    centralizedIsolation: '',
                    homeQuarantine: '3天',
                    dailyMonitoring: '11天',
                    fortyEight: '',
                    retroactiveDate: '4月20日',
                    status:3
                },
                {
                    province: "浙江省",
                    city: "杭州市",
                    area: '拱墅区',
                    sealedArea: '封控区笕桥街道钱塘白石嘉苑16幢',
                    centralizedIsolation: '14天',
                    homeQuarantine: '7天',
                    dailyMonitoring: '',
                    fortyEight: '',
                    retroactiveDate: '4月20日',
                    status:1
                },
            ],
	initData() {//created时候调用
            for (var i = 0; i < this.tableData.length; i++) {
                if (i === 0) {
                    //设置table表格行号、设置合并参数,以便相同参数合并
                    this.spanArr.push(1);
                    this.pos = 0;

                    this.cityArr.push(1);
                    this.cityPos = 0;

                    this.areaArr.push(1);
                    this.areaPos = 0;
                } else {
                    // 判断当前元素与上一个元素是否相同
                    if (this.tableData[i].province === this.tableData[i - 1].province) {
                        this.spanArr[this.pos] += 1;
                        this.spanArr.push(0);
                    }else{
                        this.spanArr.push(1);
                        this.pos = i;
                    }

                    if (this.tableData[i].city=== this.tableData[i - 1].city) {
                        this.cityArr[this.cityPos] += 1;
                        this.cityArr.push(0);
                    }else{
                        this.cityArr.push(1);
                        this.cityPos = i;
                    }

                    if (this.tableData[i].area=== this.tableData[i - 1].area) {
                        this.areaArr[this.areaPos] += 1;
                        this.areaArr.push(0);
                    }else{
                        this.areaArr.push(1);
                        this.areaPos = i;
                    }
                }
            }
            console.log(this.cityArr,'cityArr')
        },

        //单元格合并
        objectSpanMethod({row, column, rowIndex, columnIndex}) {
            // //行,列,行下标,列下标( 控制要合并的列 )
            //columnIndex ===0
            //[0, 1, 2].includes(columnIndex)
            // console.log(rowIndex)
            if (columnIndex ===0) {
                const _row = this.spanArr[rowIndex];
                const _col = _row > 0 ? 1 : 0; // 如果这一行隐藏了,这列也隐藏
                return {
                    rowspan: _row, //合并的行数
                    colspan: _col, //合并的列数,设为0则直接不显示
                };
            }
           else if (columnIndex ===1) {
                const _row = this.cityArr[rowIndex];
                const _col = _row > 0 ? 1 : 0; // 如果这一行隐藏了,这列也隐藏
                return {
                    rowspan: _row, //合并的行数
                    colspan: _col, //合并的列数,设为0则直接不显示
                };
            }
            else if (columnIndex ===2) {
                const _row = this.areaArr[rowIndex];
                const _col = _row > 0 ? 1 : 0; // 如果这一行隐藏了,这列也隐藏
                return {
                    rowspan: _row, //合并的行数
                    colspan: _col, //合并的列数,设为0则直接不显示
                };
            }
        },
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值