vue项目- el-table表格合并行

1.再页面中表格加上行方法

<el-table

:span-method="objectSpanMethod"

</el-table>

2,定义2个变量

复制代码
  spanArr: [], //存储合并单元格的开始位置
      colFields: [
        'itemCode',
        'itemDesc',
        'purchaseApplyNo',
        'purchaseApplyLinenum',
        'purchaseOrderNo',
        'purchaseOrderLinenum',
        'purchaseMode',
        'purchaseMethod',
        'materielSection',
        'materielNo',
        'materielDesc',
        'num',
        'unit',
        'supplierName',
        'technologyId',
        'biddingPlanNo',
        'biddingBatch',
        'outbidDate',
        'frameworkAgreementNo',
        'eCommerceNo',
        'applyUser',
        'applyDate',
        'purchaseTime',
        'plannedDeliveryTime',
        'outbid',
        'contractNo',
        'orderTotalNetPrice',
        'orderTaxInclusivePrice',
        'orderDate',
        'handOverNum',
        'handOverDate',
        'checkNum',
        'checkDate',
        'wbsNo',
        'wbsDesc',
      ],
  1. 由于我的表格只需要固定编码和名字,针对这2个字段的判断处理

    getSpanArr() {
    for (let i = 0; i < this.tableData.length; i++) {
    let row = i;
    // let col = i % this.colCount;
    if (row === 0) {
    // i 表示行 j表示列
    for (let j = 0; j < this.colFields.length; j++) {
    this.spanArr[i * this.colFields.length + j] = {
    rowspan: 1,
    colspan: 1,
    };
    }
    } else {
    for (let j = 0; j < this.colFields.length; j++) {
    // 当前和上一次的一样
    // 合并所有列的相同数据单元格
    if (
    this.colFields[j] == 'itemCode' ||
    this.colFields[j] == 'itemDesc'
    ) {
    // 指定合并哪些列
    if (
    this.tableData[row]['itemCode'] !==
    this.tableData[row - 1]['itemCode'] ||
    this.tableData[row]['itemDesc'] !==
    this.tableData[row - 1]['itemDesc']
    ) {
    // 哪些不合并:itemCode不一样的,不合并
    this.spanArr[row * this.colFields.length + j] = {
    rowspan: 1,
    colspan: 1,
    };
    } else if (
    this.tableData[row][this.colFields[j]] ===
    this.tableData[row - 1][this.colFields[j]]
    ) {
    let beforeItem =
    this.spanArr[(row - 1) * this.colFields.length + j];
    this.spanArr[row * this.colFields.length + j] = {
    rowspan: 1 + beforeItem.rowspan, // 合并几列
    colspan: 1, // 合并几行
    };
    beforeItem.rowspan = 0;
    beforeItem.colspan = 0;
    } else {
    // rowspan 和 colspan 都为1表格此单元格不合并
    this.spanArr[row * this.colFields.length + j] = {
    rowspan: 1,
    colspan: 1,
    };
    }
    }
    }
    }
    }
    // 对数据进行倒序
    let stack = [];
    for (let i = 0; i < this.colFields.length; i++) {
    for (let j = 0; j < this.tableData.length; j++) {
    // console.log("i=" + i + " j=" + j);
    // i 表示列 j表示行
    if (j === 0) {
    if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
    stack.push(this.spanArr[j * this.colFields.length + i]);
    }
    } else {
    if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
    stack.push(this.spanArr[j * this.colFields.length + i]);
    } else {
    stack.push(this.spanArr[j * this.colFields.length + i]);
    while (stack.length > 0) {
    let pop = stack.pop();
    let len = stack.length;
    this.spanArr[(j - len) * this.colFields.length + i] = pop;
    }
    }
    }
    }
    }
    // console.log(this.spanArr);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    // console.log(this.spanArr[rowIndex * this.colFields.length + columnIndex]);
    return this.spanArr[rowIndex * this.colFields.length + columnIndex];
    },

相关推荐
持久的棒棒君3 小时前
npm安装electron下载太慢,导致报错
前端·electron·npm
渔舟唱晚@4 小时前
大模型数据流处理实战:Vue+NDJSON的Markdown安全渲染架构
vue.js·大模型·数据流
crary,记忆5 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
漂流瓶jz5 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou05 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干6 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大6 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu6 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端6 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
q_19132846956 小时前
基于Springboot+Vue的办公管理系统
java·vue.js·spring boot·后端·intellij idea