精华内容
下载资源
问答
  • element table合并单元格

    千次阅读 2019-06-19 13:45:29
    在使用element table这个组件的时候,发现有些数据需要合并行,有些数据又要合并列,table自带了span-method这个方法,可以根据需要进行单元格合并。 getSpanArr(data) { this.spanArr = [] for (var i = 0; i &...

    element table组件合并行或列

    在使用element table这个组件的时候,发现有些数据需要合并行,有些数据又要合并列,table自带了span-method这个方法,可以根据需要进行单元格的合并。

    getSpanArr(data) {
                this.spanArr = []
                for (var i = 0; i < data.length; i++) {
                    if (i === 0) {
                        this.spanArr.push(1);
                        this.pos = 0
                    } else {
                        // 判断这一条和上一条id是否相同
                        if (data[i].id === data[i - 1].id) {
                            this.spanArr[this.pos] += 1;
                            this.spanArr.push(0);
                        } else {
                            this.spanArr.push(1);
                            this.pos = i;
                        }
                    }
                }
    },
    
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 0) {
                    const _row = this.spanArr[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col
                    }
                }else if(columnIndex === 1){
                    const _row = this.spanArr[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col
                    }
                }else if(columnIndex === 2){
                    const _row = this.spanArr[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col
                    }
                }else if(columnIndex === 3){
                    const _row = this.spanArr[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col
                    }
                }
            },
    

    getSpanArr这个函数的作用是整合需要合并的行,假设data是需要处理的数据列表,对这个列表进行循环,如果是第一条先在spanArr数组加1,并且把这个位置pos置0,如果之后的数据和上一条数据的id相同,那就在同样的pos位置加1,同时push一个0,代表要合并的行的数量,如果不相同,就往spanArr中新加入一个1,同时记住位置。
    这个方法需要数据已经是按id排序过的数组,即相同id的数据相邻。

    objectSpanMethod是我写的span-method方法,因为我需要的是合并相同id的行的前4列单元格,首先判断columnIndex(列号)是多少,然后取出spanArr当前行号对应的数字,如果当前行号对应的数字是>0代表当前行存在且不需要合并,然后return,return既可以是一个对象,也可以是一个数组,第一个元素代表rowspan,第二个元素代表colspan。
    这样就可以合并行的单元格。效果类似
    在这里插入图片描述
    但是如果要合并同一行中左右的单元格,达到如下的效果
    在这里插入图片描述
    这样需要合并同行的列,只需要控制一下想要合并的行就行

    if (rowIndex % 2 === 0) {
              if (columnIndex === 0) {
                return [1, 2];
              } else if (columnIndex === 1) {
                return [0, 0];
              }
            }
    

    在行号对2取余数未0的时候,如果列号是0,就合并第0列和第1列,同时第1列要返回[0,0],此处必须要返回第一列的合并数组,否则table表就会多一列,因为第0列占据的colspan是2,此外其他列占据为1,会使表格显示不正常。

    展开全文
  • 合并单元格时占用那个单元格,那么原来的单元格渲染必须清除,否则会将该行数据在该占位单元格位置后移一位; 合并第二、三、四列时,需要把第二列和第三列隐藏 if (columnIndex === 1) { return [1, 3]; } else if ...

    合并单元格时占用那个单元格,那么原来的单元格渲染必须清除,否则会将该行数据在该占位单元格位置后移一位;
    合并第二、三、四列时,需要把第二列和第三列隐藏
    if (columnIndex === 1) {
    return [1, 3];
    } else if (columnIndex === 2) {
    return [0, 0];
    } else if (columnIndex === 3) {
    return [0, 0];
    }

    展开全文
  • 使用element table中span-method 进行合并单元格存在一个API中未说明的原则(有示例) 1.合并单元格时占用那个单元格,那么原来的单元格渲染必须清除,否则会将该行数据在该占位单元格位置后移一位; 操作方法是{...

    使用element table中span-method 进行合并单元格存在一个API中未说明的原则(有示例)

    1.合并单元格时占用那个单元格,那么原来的单元格渲染必须清除,否则会将该行数据在该占位单元格位置后移一位;

    操作方法是{rowspan: 0, colspan: 0}

    示例:

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const vm = this;
      if (row.mergeNum > 0) {
        if (columnIndex != 8 && (columnIndex < 39 || columnIndex > 62)) {
          return { rowspan: row.mergeNum + 1, colspan: 1 };
        }
      } else if (row.mergeNum == -1) {
        //隐藏单元格,否则单元格会错位,必不可少
        if (columnIndex != 8 && (columnIndex < 39 || columnIndex > 62)) {
          return { rowspan: 0, colspan: 0 };
        }
      }
    }
    展开全文
  • 抑郁使你厌倦世界,理智使你苟延残喘 前端QQ群: 981668406 在此附上我的QQ: 2489757828 有问题的话可以一同探讨 我的github: 李大玄 ...el-table :data="tableData" :span-method="objectSpanMethod

    抑郁使你厌倦世界,理智使你苟延残喘

    前端QQ群: 981668406
    在此附上我的QQ: 2489757828 有问题的话可以一同探讨
    我的github: 李大玄
    我的私人博客: 李大玄
    我的简书: 李大玄
    我的CSDN: 李大玄
    在这里插入图片描述

    template

    <template>
      <div>
        <div class="panel">
          <el-table :data="tableData" :span-method="objectSpanMethod" border>
            <el-table-column prop="name" label="部门品线" width="160"></el-table-column>
            <el-table-column prop="campaignName" label="波次名称"></el-table-column>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="type" label="资源类型"></el-table-column>
            <el-table-column prop="shareStatus" label="共享状态"></el-table-column>
            <el-table-column prop="frequencyStr" label="频次"></el-table-column>
            <el-table-column prop="impression" label="曝光"></el-table-column>
            <el-table-column prop="impressionPercent" label="曝光占比"></el-table-column>
            <el-table-column prop="excBeforeKpi" label="下降比例KPI"></el-table-column>
            <el-table-column prop="ExcAbsKpi" label="下降绝对值KPI"></el-table-column>
          </el-table>
        </div>
      </div>
    </template>
    

    解释

     rowspan()这个函数就是用来返回 spanArr 数组的,
    定义每一行的 rowspan
    if( index === 0),第一行,直接先给数组 push 进一个1,表示自己先占一行,
    position 是数组元素的位置 (此时是从数组元素的第一个开始,所以position 为 0), position为 0 意思表示的就是数组的第一个元素。
    
    当到了 index 为 2 的时候,if(this.listData[index][spanName] === this.listData[index-1][spanName]),
    让第二行与第一行作比较:
    (1)如果第二行与第一行相等的话,position 就 +1,当有 n 行第一行相同,position 就为 n,表示向下合并 n 行;
    第二行自己就 spanArr.push(0),表示第二行“消失”,因为第一行和第二行合并了;
    (2)如果第二行与第一行不相等的话,那么 spanArr.push(1);就让第二行自己独占一行;
    position = index :把指针拿到 index 这行来,表示设置数组 spanArr[position] 的元素值,然后定义从此行开始向下合并几行
    (可以根据示例研究下,当 index 为 2 时,position 为 2,当 index 为 3 时,第四行与第三行需要合并,
    那么在数组的 position 元素就要 +1 了,也就是 spanArr[position] += 1)
    
    :span-method="objectSpanMethod" 
    
    这个是官方给定的绑定属性和对应的方法,objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }
    row: 当前行
    column: 当前列
    rowIndex:当前行号
    columnIndex :当前列号
    
    该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表 colspan。
    也可以返回一个键名为 rowspan 和 colspan 的对象。
    
    const _col = _row > 0 ? 1 : 0;  定义的这个单元格列的合并,我们项目只合并行,不合并列;
    
    _row:代表合并行的行数,_row 的值要么是 1,或者更大的自然正整数,要么是 0。
    1代表:独占一行
    更大的自然数:代表合并了若干行
    0:代表“消失”的哪那一个单元格,后面的单元格向前推一格
    

    js

    <script>
      export default {
        data() {
          return {
         
            testArr1: [],
            testArr2: [],
            testArr3: [],
            testArr4: [],
            testArr5: [],
            testArr6: [],
            testArr7: [],
            testPosition1: 0,
            testPosition2: 0,
            testPosition3: 0,
            testPosition4: 0,
            testPosition5: 0,
            testPosition6: 0,
            testPosition7: 0,
    
            tableData: [
              {"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"1-123122","impression":444,"impressionPercent":"100.00%","shareStatus":"共享前","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"pc"},
              {"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"123123+","impression":0,"impressionPercent":"0.00%","shareStatus":"共享前","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"pc"},
              {"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"1-123122","impression":888,"impressionPercent":"100.00%","shareStatus":"共享后","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"pc"},
              {"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"123123+","impression":0,"impressionPercent":"0.00%","shareStatus":"共享后","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"pc"},
              {"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"1-123122","impression":444,"impressionPercent":"100.00%","shareStatus":"共享前","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"移动"},
              {"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"123123+","impression":0,"impressionPercent":"0.00%","shareStatus":"共享前","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"移动"},
              {"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"1-123122","impression":333,"impressionPercent":"100.00%","shareStatus":"共享后","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"移动"},
              {"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"123123+","impression":0,"impressionPercent":"0.00%","shareStatus":"共享后","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"移动"}
            ]
          };
        },
        mounted() {
          this.rowspan(this.testArr1, this.testPosition1, "name");
          this.rowspan(this.testArr2, this.testPosition2, "campaignName");
          this.rowspan(this.testArr3, this.testPosition3, "date");
          this.rowspan(this.testArr4, this.testPosition4, "type");
          this.rowspan(this.testArr5, this.testPosition5, "shareStatus");
          this.rowspan(this.testArr6, this.testPosition6, "excBeforeKpi");
          this.rowspan(this.testArr7, this.testPosition7, "ExcAbsKpi");
        },
        methods: {
          rowspan(spanArr, position, spanName) {
            this.tableData.forEach((item, i) => {
              if (i === 0) {
                spanArr.push(1);
                position = 0;
              } else {
                if ( this.tableData[i][spanName] === this.tableData[i - 1][spanName]) {
                  spanArr[position] += 1;
                  spanArr.push(0);
                } else {
                  spanArr.push(1);
                  position = i;
                }
              }
            });
          },
          // 表格合并行
          objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
              const _row = this.testArr1[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col,
              };
            }
            if (columnIndex === 1) {
              const _row = this.testArr2[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col,
              };
            }
            if (columnIndex === 2) {
              const _row = this.testArr3[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col,
              };
            }
            if (columnIndex === 3) {
              const _row = this.testArr4[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col,
              };
            }
            if (columnIndex === 4) {
              const _row = this.testArr5[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col,
              };
            }
            if (columnIndex === 8) {
              const _row = this.testArr6[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col,
              };
            }
            if (columnIndex === 9) {
              const _row = this.testArr7[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col,
              };
            }
          },
          merage() {
            this.merageInit();
            for (let i = 0; i < this.tableData.length; i += 1) {
              if (i === 0) {
                // 第一行必须存在
                this.typeNameArr.push(1);
                this.typeNamePos = 0;
                this.storeArr.push(1);
                this.storePos = 0;
                this.feeArr.push(1);
                this.feePos = 0;
              } else {
                // 判断当前元素与上一个元素是否相同,eg:this.typeNamePos 是 this.typeNameArr序号
                // 第一列
                // eslint-disable-next-line no-lonely-if
                if (this.tableData[i].name === this.tableData[i - 1].name) {
                  this.typeNameArr[this.typeNamePos] += 1;
                  this.typeNameArr.push(0);
                } else {
                  this.typeNameArr.push(1);
                  this.typeNamePos = i;
                }
                // 第二列
                if (this.tableData[i].campaignName === this.tableData[i - 1].campaignName &&
                    this.tableData[i].name === this.tableData[i - 1].name
                ) {
                  this.storeArr[this.storePos] += 1;
                  this.storeArr.push(0);
                } else {
                  this.storeArr.push(1);
                  this.storePos = i;
                }
                // 第三列
                if (this.tableData[i].date === this.tableData[i - 1].date &&
                    this.tableData[i].campaignName === this.tableData[i - 1].campaignName &&
                    this.tableData[i].name === this.tableData[i - 1].name
                ) {
                  this.feeArr[this.feePos] += 1;
                  this.feeArr.push(0);
                } else {
                  this.feeArr.push(1);
                  this.feePos = i;
                }
                // 第4列
                if (this.tableData[i].type === this.tableData[i - 1].type &&
                    this.tableData[i].date === this.tableData[i - 1].date &&
                    this.tableData[i].campaignName === this.tableData[i - 1].campaignName &&
                    this.tableData[i].name === this.tableData[i - 1].name
                ) {
                  this.feeArr[this.feePos] += 1;
                  this.feeArr.push(0);
                } else {
                  this.feeArr.push(1);
                  this.feePos = i;
                }
                // 第5列
                if (this.tableData[i].shareStatus === this.tableData[i - 1].shareStatus &&
                    this.tableData[i].type === this.tableData[i - 1].type &&
                    this.tableData[i].date === this.tableData[i - 1].date &&
                    this.tableData[i].campaignName === this.tableData[i - 1].campaignName &&
                    this.tableData[i].name === this.tableData[i - 1].name
                ) {
                  this.feeArr[this.feePos] += 1;
                  this.feeArr.push(0);
                } else {
                  this.feeArr.push(1);
                  this.feePos = i;
                }
              }
            }
          },
        },
      };
    </script>
    
    展开全文
  • el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"> <el-table-column prop="id" label="ID" width="180"> </el-table-column> <el-...
  • 这是官网合并列效果,可是,并不适用于一级表头,官方文档并未发现直接实现属性 给table加header-cell-style,代码如下 <el-table :data="tableData" border fit :header-cell-style="discountHeaderStyle"> ...
  • 第一列中第二行以后的行是需要合并的,el-table 提供了一个 span-method 属性,用于传入合并单元格方法,在里面可以根据 rowspan、colspan 合并行或列 第 2、3、4 列需要改变表格 border,需要使用 /deep/ 修改 ...
  • el-table合并单元格(vue+element) - 先在el-table放入:span-method="arraySpanMethod" <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}" :data="merchantList" border :span-method=...
  • 实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
  • 主要介绍了element-ui中Table表格省市区合并单元格的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Elementtable表格的合并单元格

    千次阅读 2019-12-10 16:30:31
    Elementtable表格的合并单元格 element的官方说明 通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个...
  • 思路就是每个项都要对比,如果相同就合并,如果不同就不合并。下面是实现代码 <template> <div class="app-container"> <el-button type="primary" icon="el-icon-right" @click="getData">...
  • 关于element-ui中Table表格如何合并单元格

    万次阅读 多人点赞 2019-01-07 19:28:51
    element-ui中Table表格如何合并单元格 相信大家在使用element-ui中table组件的时候在boss要求合并单元格时都犯过怵(仅指我这个小白),而element-ui中合并的时候也没有给全解释(也是我的问题),但工作在前,终于...
  • element UI table 实现合并单元格

    千次阅读 2018-09-10 08:53:00
    el-table :data="auditListArray" :span-method="objectSpanMethod"&gt; ... &lt;/el-table&gt; setTable() { let spanOneArr = [], spanTwoArr = [], concatOne = 0...
  • 通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素...
  • 1代表:独占一行 更大的自然数:代表合并了若干行 0:代表“消失”的哪那一个单元格,后面的单元格向前推一格 实现方式: html: <el-table :data="tableData" :span-method="objectSpanMethod" stripe class="znv...
  • el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
  • element-ui table 动态合并单元格

    千次阅读 2019-11-05 10:43:08
    1.效果图如下: 2.html 代码: ...<template> <div> ...el-table border ref="table" :data="dataList" style="width: 100%" :span-method="objectSpanMethod" :header-cell-style="{bac...
  • vue中elementUI table组件合并单元格教程 一、先看看我这边合并后的效果图 二、合并思路或原理大致讲解 1.首先要去遍历表格数组,计算出每行需要合并的数量(遍历数组去记录合并规则) 2.通过给table传入span-...
  • element-ui table 合并单元格 封装方法可直接调用即可 我们在使用table表格时总会遇到需要合并单元格的需求 示例 请看代码 <el-table :data="tableData" class="table" border ref="multipleTable" ...
  • element-UI el-table合并单元格

    万次阅读 2018-10-30 14:37:18
    合并单元格,如果id列值一致,则合并。 &lt;el-table :data="tableData6" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"&gt;  &lt;...
  • element-合并单元格

    2020-08-28 14:23:55
    element-合并单元格 官方介绍:通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个...
  • Element table组件单元格合并(纵向)

    万次阅读 2018-07-30 18:27:12
    一、计算 ... &lt;div class="lomeo-table-content"&gt; &lt;el-table :data="rdata" :span-method="spanMethod" border style="width: 100%"&gt; &
  • 多场景下多模型(层级还有多层可自行添加判断即可)多对多 dataList: [{ first: '1', second: '1', model: '蛋黄酱', all: '123213' }, { first: '1', second: '1', model: '蛋黄酱2', ...
  • VUE项目中经常遇到table表格合并单元格的需求,el-table组件支持自定义单元格合并(:span-method=“objectSpanMethod”),即将某一属性值相同的单元格合并,只需绑定“span-method”属性,传入合并规则就行。...
  • 通过给table传入span-method方法可以实现合并行或列 原理: getSpanArr(data)方法 data就是我们从后台拿到的数据,通常是一个数组;spanArr是一个空的数组,用于存放每一行记录的合并数;pos是spanArr的索引。 如果...
  • vue原始table实现合并单元格,插入button按钮,并且post服务以及实现了分页的功能

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,593
精华内容 1,437
关键字:

elementtable合并单元格