table合并单元格

柔情只为你懂 2022-09-04 04:54 311阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX2RvbmdfeWFfeXVu_size_16_color_FFFFFF_t_70][]

遇到这种设计，记录一下

<el-table
          :data="tableDataNew"
          :span-method="objectSpanMethod"
          border
          style="width: 100%; margin-top: 20px">
          <el-table-column
            prop="id"
            label="ID"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="amount1"
            label="数值 1（元）">
          </el-table-column>
          <el-table-column
            prop="amount2"
            label="数值 2（元）">
          </el-table-column>
          <el-table-column
            prop="productName"
            label="商品名称">
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格">
          </el-table-column>
          <el-table-column
            prop="address"
            label="产地">
          </el-table-column>
        </el-table>

<script>
      export default {
        data() {
          return {
            tableDataNew:[],
            tableData: [{
              id: '12987122',
              name: '王小虎1',
              amount1: '234',
              amount2: '3.2',
              amount3: 10,
              children:[
                {
                  address:'上海',
                  productName:'苹果',
                  price:'12.00'
                }, {
                  address:'上海',
                  productName:'苹果',
                  price:'13.00'
                },
                 {
                  address:'上海',
                  productName:'苹果',
                  price:'15.00'
                }
              ]
            }, {
              id: '12987124',
              name: '王小虎2',
              amount1: '324',
              amount2: '1.9',
              amount3: 9,
              children:[
                {
                  address:'上海',
                  productName:'苹果',
                  price:'12.00'
                },
                 {
                  address:'上海',
                  productName:'苹果',
                  price:'12.00'
                }
              ]
            }, {
              id: '12987125',
              name: '王小虎3',
              amount1: '621',
              amount2: '2.2',
              amount3: 17,
             children:[
                {
                  address:'上海',
                  productName:'苹果',
                  price:'12.00'
                }, {
                  address:'上海',
                  productName:'苹果',
                  price:'13.00'
                },
                 {
                  address:'上海',
                  productName:'苹果',
                  price:'15.00'
                }
              ]
            }, {
              id: '12987126',
              name: '王小虎4',
              amount1: '539',
              amount2: '4.1',
              amount3: 15,
              children:[
                {
                  address:'上海',
                  productName:'苹果',
                  price:'12.00'
                }, {
                  address:'上海',
                  productName:'苹果',
                  price:'13.00'
                },
                 {
                  address:'上海',
                  productName:'苹果',
                  price:'15.00'
                }
              ]
            }]
          };
        },
        mounted() {
          this.dataFilter()
        },
        methods: {
          dataFilter() {
              // 主要是数据符合table的要求，用foreach for 循环都可，两层循环，把数组扁平化，提供一个思路
            this.tableDataNew =[]
            console.log('thisdate',this.tableData)
            for (let j=0; j<this.tableData.length; j++) {
              console.log('this.tableData.length',this.tableData.length)
                 console.log('this.tableData[j].children.length',this.tableData[j].children)
              if(this.tableData[j].children === undefined || this.tableData[j].children === 'undefined') {
                 this.tableDataNew.push({...{
                      id: this.tableData[j].id,
                      name:  this.tableData[j].name,
                      amount1: this.tableData[j].amount1,
                      amount2: this.tableData[j].amount2,
                      }})
               console.log('结果',this.tableDataNew)
              } else {
                for (let i = 0;i < this.tableData[j].children.length; i++) {
                  console.log('this.tableData[j].children.length',this.tableData[j].children.length)
                    this.tableDataNew = this.tableDataNew.concat({...this.tableData[j].children[i],...{
                      id: this.tableData[j].id,
                      name:  this.tableData[j].name,
                      amount1: this.tableData[j].amount1,
                      amount2: this.tableData[j].amount2,
                      length: this.tableData[j].children.length,
                      istarget: i ===0 || i === this.tableData[j].children.length+1? true :false // 记录合并单元格位置
                    }})
                }
             }
            }
             console.log('新数据', this.tableDataNew)
          },
          // 合并单元格
          objectSpanMethod({ row, column, rowIndex, columnIndex }) {
              if (columnIndex < 4) {
                  if(row.istarget) {
                    return {
                      rowspan: row.length,
                      colspan: 1
                    };
                  } else {
                    return {
                      rowspan: 0,
                      colspan: 0
                   };
              }
            }
            console.log('row.istarget', row.istarget )
          }
        }
      };
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX2RvbmdfeWFfeXVu_size_16_color_FFFFFF_t_70]: /images/20220829/aecbe0f473204fa18c45f942a5722807.png

发表评论取消回复

表情：

评论列表（有 0 条评论，311人围观）

还没有评论，来说两句吧...

相关阅读

相关合并单元格

cellRange = new CellRangeAddress(0, 0, 4, 5); //开始行结束行开始列结束列 // 合并单元格 she

ゞ浴缸里的玫瑰/ 2023年10月15日 13:06/ 0 赞/ 76 阅读

相关 antd Table 组件动态合并单元格

antd Table 组件动态合并单元格前言 Table 组件静态数据合并单元格 Table 组件动态数据

电玩女神/ 2022年12月02日 00:26/ 0 赞/ 1010 阅读

相关 vueElement之table合并单元格

运用情景：在某些场景需要table表格合并行或者合并列 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

不念不忘少年蓝@/ 2022年10月25日 15:27/ 0 赞/ 410 阅读

相关 table合并单元格

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX2Rv

柔情只为你懂/ 2022年09月04日 04:54/ 0 赞/ 312 阅读

相关 elementui Table合并单元格

<template> <div class=""> <el-table :data="listData"

喜欢ヅ旅行/ 2022年09月03日 08:28/ 0 赞/ 255 阅读

相关【Javascript】动态合并table单元格

废话不说直接上代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww

╰半橙微兮°/ 2022年08月22日 03:47/ 0 赞/ 277 阅读

相关 Javascript 动态合并table单元格

原博客地址：https://blog.csdn.net/kida_yuan/article/details/51371487 直接保存html浏览器打开看效果

小灰灰/ 2022年05月20日 01:43/ 0 赞/ 320 阅读

相关 bootstrap-table合并单元格

合并行 onLoadSuccess: function (data) { model.utils.mergeCells(data.rows, "cou

柔情只为你懂/ 2022年04月13日 13:13/ 0 赞/ 556 阅读

相关 table表格遍历合并单元格

<c:forEach items="$\{list\}" var="l" varStatus="status"> 　　<tr>

Love The Way You Lie/ 2022年01月09日 20:25/ 0 赞/ 532 阅读

相关 bootstrap table实现合并单元格效果 ,bootstrap table实现纵向合并

引用bootstrap-table-merge-cells.js \ bootstrap-table-merge-cells \\\\ 项目介绍 bootstrap-t

朱雀/ 2021年11月26日 13:40/ 0 赞/ 711 阅读