• UI组件--element-ui--Table组件自定义合计行


    需求: Element-ui的Table组件自带合计行, 但是需求需要在合计行的某些单元格有特别的样式以及事件, 没有研究出怎么在既有合计行上完成此需求, 于是利用其原本的一些属性完成自定义合计行.

    分析: 在Table组件中是有columns(包含所有列的数据的数组)的, 但是只有在summary-method事件中才暴露出来, 用来自定义合计行, 可以利用此事件来获得columns, 但是又不想显示自带的合计行, 就可以这样: 

    <template>
        <el-table
          @row-click="rowClick"
          @cell-click="singleClick"
          :row-class-name="setSumRowStyle"
          :data="tableData"
          stripe
          show-summary
          :summary-method="getColumns"
          style=" 100%"
          >
        </el-table>
    </template>
        // 获取columns
        getColumns(param) {
          const { columns } = param;
          this.columns = columns;
          return []
        },
        // 计算合计行
        getSummaries (data) {
          let Obj = {};
          Obj.type = 'sum';
          let lastData = this.levelList[this.levelList.length - 1];this.columns.forEach((column, index) => {
            if (index === 0) {
              Obj[column.property] = '全部';
              return;
            }
            if (index === 1) {
              Obj[column.property] = "上一层公司名???";
              return;
            }
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
              Obj[column.property] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
            }  else {
              Obj[column.property] = '--';
            }
          })
          return Obj;  
        },
        // 将合计行数据添加到已有的列表数据的最后一项, 如果是异步, 请在请求到列表数据并且视图更新后再调用合计行方法
        getNewTableData (row) { 
          api.getList(this.checkForm).then(res => {
            console.log(res);
            if (res.status === 0 && res.result.record.length > 0) {this.columns = [];
              let newData = res.result.record;
              this.tableData = newData;
              this.total = res.result.totalCount;
              // 视图更新后再求和
              this.$nextTick(() => {
                let summaries = this.getSummaries(newData);
                this.tableData.push(summaries);
              })
            }
          })
        },

    以上步骤已经自定义完成, 但是这些是Table组件自带求和可以完成的, 我们辛苦的自定义合计主要是为了扩展事件以及样式,  此时, 只需在table表格中判断一下就可以用了:

    样式:

    // text_bule_underline是样式名称
      <el-table
          @row-click="rowClick"
          @cell-click="singleClick"
          :row-class-name="setSumRowStyle"
          :data="tableData"
          stripe
          show-summary
          :summary-method="getColumns"
          style=" 100%"
          >
          <el-table-column
            prop="name"
            width="160px"
            label="姓名">
            <template slot-scope="scope">
              <span :class="(scope.row.type && scope.row.type == 'sum') ? 'text_bule_underline': ''">{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="age"
            min-width="180px"
            label="年龄">
            <template slot-scope="scope">
              <span :class="(scope.row.type && scope.row.type == 'sum') ? 'text_bule_underline': ''">{{scope.row.age}}</span>
            </template>
          </el-table-column>
      </el-table>

    事件: 可以在 @row-click="rowClick" 或者 @cell-click="singleClick" 里面判断触发.

        // 点击行
        rowClick (row, event, column) {
          if (column.label=='查看'|| (row.type && row.type=="sum")) {
            return
          }
          this.getInfo();
        },
        // 点击单元格
        singleClick(row, column, cell, event) {
          if (column.label=='查看') {
            this.getDetailList();
          }
        },

    目前除了以上这种我还没有找到更好的方法为Table组件合计行的某些单元格加上事件或者样式,  如果有其他更简便的方法, 欢迎交流~

     
  • 相关阅读:
    HTML标签(二)
    HTML 表单
    HTML列表
    HTML表格
    Critical Section Problems
    Stack, Queue and Priority Queue
    Introduction to Dynamic Set
    Introduction to Divide-and-Conquer
    Sorting Algorithms Overview
    Python学习笔记(三)数据类型
  • 原文地址:https://www.cnblogs.com/qiezuimh/p/10414213.html
Copyright © 2020-2023  润新知