zoukankan      html  css  js  c++  java
  • 使用Element的table合并单元格(按相同项)

    代码:

    <el-table :data="listArr" border style=" 99%" id="mainFrame" :span-method="objectSpanMethod" show-summary :summary-method="getSummaries">
            <el-table-column prop="userName" label="姓名" align="center"></el-table-column>
            <el-table-column prop="logMonth" label="日期" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.logMonth | logMonth}}</span>
              </template>
            </el-table-column>
        ......
          </el-table>
    methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
          let that = this
          that.spanArr = [] // 页面展示的数据,不一定是全部的数据,所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造成数据渲染混乱
          that.pos = 0
          let data = this.listArr
        //遍历数据 data.forEach((item, index)
    => { if (index === 0) { //判断是否是第一项(取决于你准备合并表格第几项) this.spanArr.push(1) this.pos = 0 } else {//不是第一项时,就根据标识去存储 if (data[index].userId === data[index - 1].userId) {// 查找到符合条件的数据时每次要把之前存储的数据+1 this.spanArr[this.pos] += 1 this.spanArr.push(0) } else {// 没有符合的数据时,要记住当前的index this.spanArr.push(1) this.pos = index } } }) if (columnIndex === 0) {
        // 页面列表上 表格合并行 -> 第几列(从0开始)
       // 需要合并多个单元格时 依次增加判断条件即可
        // 数组存储的数据 取出
    const _row = this.spanArr[rowIndex] const _col = _row > 0 ? 1 : 0 return { rowspan: _row, colspan: _col } } else {//不可以return {rowspan:0, colspan: 0} 会造成数据不渲染, 也可以不写else,eslint过不了的话就返回false return false } }, }
  • 相关阅读:
    php javascript
    在线支付接口之PHP支付宝接口开发
    作业9 最长公共子序列
    第十二章 税制的设计
    第十一章 公共物品和公共资源
    第十章 外部性
    第九章 应用:国际贸易
    作业8 矩阵乘法链
    第八章 应用:赋税的代价
    第七章 消费者、生产者与市场效率
  • 原文地址:https://www.cnblogs.com/weiweiyeyu/p/15351658.html
Copyright © 2011-2022 走看看