zoukankan      html  css  js  c++  java
  • element table合计行自定义及单元格合并

      问题项目需求要求table下面加合计一行

      图片展示

    代码示例:

     TEMPLATE:

      span-method是自定义table单元    

      show-summary是展示合并行

      summary-method是自定义合并行

    <templete>
        <div>
             <el-table
          ref="table"
          v-loading="loading"
          class="table-wrap"
          :data="inventorys"
          :span-method="arraySpanMethod"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          row-key="id"
          lazy
          fit
          stripe
          show-summary
          :summary-method="getSummaries"
          border
        >
          <el-table-column label="序号" align="center">
            <template slot-scope="{ row, $index }">
              {{ ($index + 1) * currentPage }}
            </template>
          </el-table-column>
          <el-table-column prop="productCode" label="产品编号" align="center">
            <template slot-scope="{ row }">
              {{ row.productCode }}
            </template>
          </el-table-column>
          <el-table-column prop="availQuantity" label="可售数量" sortable align="center">
            <template slot-scope="{ row }">
              {{ row.availQuantity }}
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="在库数量" align="center">
            <template slot-scope="{ row }">
              {{ row.quantity }}
            </template>
          </el-table-column>
        </el-table>
        </div>
    </templete>
     SCRIPT
     arraySpanMethod() {
        //table合计行合并单元格
        setTimeout(() => {
          if (this.$refs.table.$el) {
            let current = this.$refs.table.$el
              .querySelector('.el-table__footer-wrapper')
              .querySelector('.el-table__footer')
            let cell = current.rows[0].cells
            //cell[1].style.display = 'none'
            cell[1].colSpan = '9'
          }
        }, 50)
      },
    getSummaries(param) {
       //table自定义合计行方法summary-method
       const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计可售总数量';
            return
          }
          if(index===9){
            const values = data.map(item => Number(item[column.property]))
            sums[1] = values.reduce((prev, curr) => {
              return prev + curr
            }, 0)
            sums[1]=sums[1].toFixed(2)
          }
    
        })
        return sums
    }
      

    --------END

  • 相关阅读:
    C#中判断为空
    ArcGIS中的AddIn开发示例
    当前不会命中断点,还没有加载该文档加载任何符号
    设置ArcGIS的外观改回到出厂
    读取Style符号库样式的方法
    ArcEngine中的缩放地图
    修改字段结构之GP工具
    修改字段结构之ArcGIS Diagrammer
    merage语句
    Windows下Redis的安装使用
  • 原文地址:https://www.cnblogs.com/liujiajiablog/p/15609224.html
Copyright © 2011-2022 走看看