登录
当前位置： 首页 > 知识库问答 >
问题：

javascript - element ui table 合并行的问题？

廉高邈
2023-06-30

数据结构如下 tabledata: [

    {
      TenderProjectId: 22787,
      Tid: 7716,
      ProjectState: 0,
      TenderProjectName: "刘----公开招标----单价最低",
      TenderCode: "BWC-GKZB-202306-01598",
      PublicityName: "刘----公开招标----单价最低中标候选人公示",
      PublicityType: 1,
      Phone: "0937-6713939",
      IsTwoStages: false,
      TwoStageNum: 1,
      PublicityInformation: [
        {
          SectionName: "第一标段",
          Winner: [
            {
              WinnerName: "测试-甘肃顺发建筑工程有限公司",
              Price: "44400.00000000000",
              Unit: "万元",
            },
          ],
        },
        {
          SectionName: "第二标段",
          Winner: [
            {
              WinnerName: "测试-甘肃顺发建筑工程有限公司",
              Price: "44400.00000000000",
              Unit: "万元",
            },
          ],
        },
      ],
      OpenBidTime: "",
      HashEndTime: "",
    },
    {
      TenderProjectId: 22786,
      Tid: 7715,
      ProjectState: 0,
      TenderProjectName: "竞磋-综合评分1",
      TenderCode: "DXLYGSJYGFGS-JZXCS-202306-01597",
      PublicityName: "竞磋-综合评分1中标候选人公示",
      PublicityType: 1,
      Phone: "0937-6713939",
      IsTwoStages: false,
      TwoStageNum: 1,
      PublicityInformation: [
        {
          SectionName: "第一标段",
          Winner: [
            { WinnerName: "测试-甘肃金璐建筑工程有限公司", Price: "0.0001000", Unit: "万元" },
          ],
        },
      ],
      OpenBidTime: "",
      HashEndTime: "",
    },
    {
      TenderProjectId: 22785,
      Tid: 7714,
      ProjectState: 0,
      TenderProjectName: "刘--公开招标---总价最低",
      TenderCode: "BWC-GKZB-202306-01596",
      PublicityName: "刘--公开招标---总价最低中标候选人公示",
      PublicityType: 1,
      Phone: "0937-6713939",
      IsTwoStages: false,
      TwoStageNum: 1,
      PublicityInformation: [
        {
          SectionName: "第一标段",
          Winner: [
            { WinnerName: "测试-甘肃昌泰建筑工程有限公司", Price: "8.850000", Unit: "万元" },
            { WinnerName: "测试-甘肃金璐建筑工程有限公司", Price: "8.900000", Unit: "万元" },
            { WinnerName: "测试-甘肃水工建筑工程有限公司", Price: "9.230000", Unit: "万元" },
          ],
        },
      ],
      OpenBidTime: "",
      HashEndTime: "",
    },
    {
      TenderProjectId: 22784,
      Tid: 7713,
      ProjectState: 0,
      TenderProjectName: "刘---公开招标---综合评分",
      TenderCode: "BWC-GKZB-202306-01595",
      PublicityName: "刘---公开招标---综合评分中标候选人公示",
      PublicityType: 1,
      Phone: "0937-6713939",
      IsTwoStages: false,
      TwoStageNum: 1,
      PublicityInformation: [
        {
          SectionName: "第一标段",
          Winner: [
            { WinnerName: "测试-甘肃昌泰建筑工程有限公司", Price: "9.620000", Unit: "万元" },
            { WinnerName: "测试-甘肃顺发建筑工程有限公司", Price: "9.670000", Unit: "万元" },
            { WinnerName: "测试-甘肃金中信工程咨询有限公司", Price: "9.640000", Unit: "万元" },
          ],
        },
      ],
      OpenBidTime: "",
      HashEndTime: "",
    },
    {
      TenderProjectId: 22783,
      Tid: 7712,
      ProjectState: 0,
      TenderProjectName: "刘---依法招标---总价最低",
      TenderCode: "BWC-YQZB-202306-01594",
      PublicityName: "刘---依法招标---总价最低中标候选人公示",
      PublicityType: 1,
      Phone: "0937-6713939",
      IsTwoStages: false,
      TwoStageNum: 1,
      PublicityInformation: [
        {
          SectionName: "第一标段",
          Winner: [
            { WinnerName: "测试-甘肃金璐建筑工程有限公司", Price: "9.490000", Unit: "万元" },
            { WinnerName: "测试-甘肃昌泰建筑工程有限公司", Price: "9.120000", Unit: "万元" },
            { WinnerName: "测试-甘肃顺发建筑工程有限公司", Price: "9.450000", Unit: "万元" },
          ],
        },
      ],
      OpenBidTime: "",
      HashEndTime: "",
    },
    {
      TenderProjectId: 22782,
      Tid: 7711,
      ProjectState: 0,
      TenderProjectName: "竞谈-总价最低1",
      TenderCode: "DXLYGSJYGFGS-JZXTP-202306-01593",
      PublicityName: "竞谈-总价最低1中标候选人公示",
      PublicityType: 1,
      Phone: "0937-6713939",
      IsTwoStages: false,
      TwoStageNum: 1,
      PublicityInformation: [
        {
          SectionName: "第一标段",
          Winner: [
            { WinnerName: "测试-甘肃金璐建筑工程有限公司", Price: "0.0001000", Unit: "万元" },
          ],
        },
      ],
      OpenBidTime: "",
      HashEndTime: "",
    },
    {
      TenderProjectId: 22781,
      Tid: 7710,
      ProjectState: 0,
      TenderProjectName: "刘----依法招标----综合评分",
      TenderCode: "BWC-YQZB-202306-01592",
      PublicityName: "刘----依法招标----综合评分中标候选人公示",
      PublicityType: 1,
      Phone: "0937-6713939",
      IsTwoStages: false,
      TwoStageNum: 1,
      PublicityInformation: [
        {
          SectionName: "第一标段",
          Winner: [
            { WinnerName: "测试-甘肃顺发建筑工程有限公司", Price: "9.580000", Unit: "万元" },
            { WinnerName: "测试-甘肃金璐建筑工程有限公司", Price: "9.540000", Unit: "万元" },
            { WinnerName: "测试-甘肃金中信工程咨询有限公司", Price: "9.410000", Unit: "万元" },
          ],
        },
      ],
      OpenBidTime: "",
      HashEndTime: "",
    },
    {
      TenderProjectId: 22780,
      Tid: 7709,
      ProjectState: 0,
      TenderProjectName: "刘---依法必招---单价最低",
      TenderCode: "BWC-YQZB-202306-01591",
      PublicityName: "刘---依法必招---单价最低中标候选人公示",
      PublicityType: 1,
      Phone: "0937-6713939",
      IsTwoStages: false,
      TwoStageNum: 1,
      PublicityInformation: [
        {
          SectionName: "第一标段",
          Winner: [
            {
              WinnerName: "测试-甘肃金中信工程咨询有限公司",
              Price: "45200.00000000000",
              Unit: "万元",
            },
            {
              WinnerName: "测试-甘肃昌泰建筑工程有限公司",
              Price: "44100.00000000000",
              Unit: "万元",
            },
          ],
        },
      ],
      OpenBidTime: "",
      HashEndTime: "",
    },
    {
      TenderProjectId: 22779,
      Tid: 7708,
      ProjectState: 0,
      TenderProjectName: "依法必招-单价最低1",
      TenderCode: "DXLYGSJYGFGS-GKZB-202306-01590",
      PublicityName: "依法必招-单价最低1中标候选人公示",
      PublicityType: 1,
      Phone: "0937-6713939",
      IsTwoStages: false,
      TwoStageNum: 1,
      PublicityInformation: [
        {
          SectionName: "第一标段",
          Winner: [
            {
              WinnerName: "测试-甘肃顺发建筑工程有限公司",
              Price: "1.00000000000",
              Unit: "万元",
            },
          ],
        },
      ],
      OpenBidTime: "",
      HashEndTime: "",
    },
    {
      TenderProjectId: 22778,
      Tid: 7707,
      ProjectState: 0,
      TenderProjectName: "刘---邀请招标---单价最低",
      TenderCode: "BWC-YQZB-202306-01589",
      PublicityName: "刘---邀请招标---单价最低中标候选人公示",
      PublicityType: 1,
      Phone: "0937-6713939",
      IsTwoStages: false,
      TwoStageNum: 1,
      PublicityInformation: [
        {
          SectionName: "第一标段",
          Winner: [
            {
              WinnerName: "测试-甘肃金中信工程咨询有限公司",
              Price: "44100.00000000000",
              Unit: "万元",
            },
            {
              WinnerName: "测试-甘肃顺发建筑工程有限公司",
              Price: "44100.00000000000",
              Unit: "万元",
            },
            {
              WinnerName: "测试-甘肃水工建筑工程有限公司",
              Price: "44400.00000000000",
              Unit: "万元",
            },
          ],
        },
      ],
      OpenBidTime: "",
      HashEndTime: "",
    },
  ],

效果图 image.png
能否实现这样的效果呢

共有2个答案

邓禄
2023-06-30 
      <el-table :data="tabledata" :span-method="objectSpanMethod">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column
          label="项目名称"
          prop="TenderProjectName"
          align="center"
          width="200"
        ></el-table-column>
        <el-table-column label="TenderCode" prop="TenderCode"></el-table-column>
        <el-table-column label="PublicityName" prop="PublicityName"></el-table-column>
        <el-table-column label="PublicityType" prop="PublicityType"></el-table-column>
        <el-table-column label="Phone" prop="Phone"></el-table-column>
        <!-- SectionName数据展示  -->
        <el-table-column label="SectionName" prop="SectionName" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.PublicityInformation.length > 0">
              <!-- scope.row.PublicityInformation要是两个数据就渲染两个单元格 -->
              <div
                v-for="(item, index) in scope.row.PublicityInformation"
                style="width:100%;min-height:45px; text-align:center;  border-bottom:1px solid #ebeef5;"
              >
                {{ item.SectionName }}
              </div>
            </div>
            <div v-else>-</div>
          </template>
        </el-table-column>
      </el-table>现在我该怎么处理PublicityInformation里面的数据呢
锺离飞飙
2023-06-30

能啊，element 有合并单元格:span-method。

<el-table
  :data="tableData"
  :span-method="arraySpanMethod"
  border
  style="width: 100%"
>

...

arraySpanMethod({ row, rowIndex, columnIndex }){//
        //下面这一段意思是，在第一列，如果挨着的两行的projectName值是一样的，就合并
        if (columnIndex == 0){//第三列就 == 3
            if (row.projectName != this.tableData[rowIndex - 1].projectName{
                let rowSpan = 0
                for (let i = rowIndex; i < this.tableData.length;i++){
                    if (this.tableData[i].projectName == row.projectName){
                        rowSpan++
                    } else {
                        break
                    }
                }
                return {
                    rowspan: rowSpan,
                    colspan: 1
                }
            }
            //...后面希望那一列按照哪个字段合并慢慢试吧
            return {
                rowspan: 0,
                colspan: 0
            }
        }
    }
 类似资料：
  • javascript - 数组合并问题？

    a=[78,187,30] b=[78,186,185,25,30] c=[78,187,186,185,25,30] //想获得的结果 a=[1,2,3,4,5] b=[1,6,7,8,3,9,5] c=[1,2,6,7,8,3,4,9,5] //想获得的结果 a、b数组里面的值都是唯一的，怎么用js获得想要的值呢？ 问了ChatGPT都没解决，它给的方法在控制台输出结果不一致，因为chatGP

  • javascript - el-tabl数据合并问题？

    el-table合并数据问题，如下图，我现在实现的效果： 但是按我现在实现的话有个问题，只要有相同值就能合并。 而实际要求是：其他列有相同值正常合并，如果诉求类型里面有相同的类型值合并了，诉求利用率才能参与合并，但如果此时诉求利用率没有相同值也不合并。同理细分类型和细分利用率一样道理 请教大家怎么优化一下完成我这一需求。 我分装合并方法： 组件span-method方法：

  • javascript - vue3关于elementuiPlus表头合并问题？

    数据： 效果： 不知道我描述清楚了没？ 如果我没有说清楚的话麻烦看下这个例子，我应该怎么处理表格的数据 https://element-plus.run/#eyJzcmMvQXBwLnZ1ZSI6Ijx0ZW1wbGF0ZT5...

  • 合并行

    Many editors have similar action: it merges selected lines into a single one. But when there’s no selection, Emmet will match context HTML tag. 许多编辑器有类似功能：将选中的多行合并为单行。不过如果没有选择，Emmet 将匹配所在 HTML 标签。 <p>

  • 前端 - antDesignVue行合并与多行编辑问题？

    我想实现多行编辑，且前面几列是行合并的，但是效果错位了，使用的是antDesignVue的a-table

  • javascript - elementui如何合并动态数据的行和列（表头合并和表格内容合并）？

    如何根据后端返回的数据来进行动态合并渲染，合并的关键字段为jianyanneirong和jianyanneirong1，合并要求如下图（如果jianyanneirong和jianyanneirong1值不同则进行行合并，但是jianyanneirong1值为空的情况需要进行行列合并）

相关问答

javascript - elementui如何合并动态数据的行和列（表头合并和表格内容合并）？使用符合合并条件的动态行数合并postgresql中的行测试并行执行-并行类问题JPA-一对多合并问题并行执行测试的周期问题

相关文章

用Postgresql合并连续的行SQL 2005合并/将多行合并为一列将多行合并为一行“按行合并”是否可以自动保证“按行合并”？JavaScript中合并数组的N种方法

相关阅读

GitLab合并请求GitLab合并请求JavaScript归并排序Pandas merge合并操作RxJava 合并运算符

相关工具

行知问卷调查系统并元冇问题Background JavaScriptJavaScript jSQL

相关文档

JavaScript 的 12 个怪癖代码整洁的 JavaScriptJavaScript 高级的知识点JavaScript 模式浅谈 JavaScript
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.