用vxe-table实现表尾计算数据并排序

码田里的小白菜

已于 2022-09-30 14:09:14 修改

阅读量2.3k

点赞数 1

文章标签： java servlet 蓝桥杯

于 2022-09-27 10:35:15 首次发布

本文链接：https://blog.csdn.net/weixin_45294459/article/details/127066309

版权

效果如下：

最重要的属性配置

     show-footer //是否显示尾部
     :merge-footer-items="mergeFooterItems"  //表尾合并规则
      :footer-cell-class-name="footerCellClassName"//表尾样式
      :footer-method="footerMethod" //最重要的部分，计算表尾的数据并渲染到页面

详细代码如下

html部分
<vxe-table
      show-footer  //展示尾部
      ref="xTableData"
      :print-config="{}"
      :merge-footer-items="mergeFooterItems"  //表尾合并规则
      :footer-cell-class-name="footerCellClassName"//表尾样式
      :footer-method="footerMethod" //最重要的部分，计算表尾的数据并渲染到页面
      :loading="loading"
      :data="tableData"
      :export-config="{}"
    >
</vxe-table>

js部分
  data() {
    return {
      mergeFooterItems: [
        { row: 0, col: 0, rowspan: 1, colspan: 2 },
        { row: 1, col: 0, rowspan: 1, colspan: 2 },
        { row: 2, col: 0, rowspan: 1, colspan: 2 },
        { row: 3, col: 0, rowspan: 1, colspan: 2 },
          ],
        }
    }


    footerMethod({ columns, data }) {
      const footerData = [
        columns.map((column, _columnIndex) => {
          if (_columnIndex === 0) {
            return "平均分";
          }
          for (let i = 2; i <= this.tableColumn.length + 2; i++) {
            if (_columnIndex === i) {
              return this.sumNum(data, column.property, "1");
            }
          }
          return null;
        }),
        columns.map((column, _columnIndex) => {
          if (_columnIndex === 0) {
            return "平均分";
          }
          for (let i = 2; i <= this.tableColumn.length + 2; i++) {
            if (_columnIndex === i) {
              return this.sumNum(data, column.property, "2");
            }
          }
          return null;
        }),
        columns.map((column, _columnIndex) => {
          if (_columnIndex === 0) {
            return "得分";
          }
          for (let i = 2; i <= this.tableColumn.length + 2; i++) {
            return this.meanNum(data, column.property);
          }
          return null;
        }),
      ];
      footerData.push(
        columns.map((column, _columnIndex) => {
          if (_columnIndex === 0) {
            return "排 序";
          }
          let footerData2 = this.vateUtils.judgeType.deepClone(footerData)[2];
          footerData2.splice(0, 2);
          let scoreSortList = [];
          footerData2.forEach((ele, index) => {
            scoreSortList.push({ [index.toString()]: ele });
          });
          for (let i = 2; i <= this.tableColumn.length + 2; i++) {
            if (_columnIndex === i) {
              return this.sortSore(scoreSortList, _columnIndex - 2);
            }
          }
        })
      );
      return footerData;
    },
    footerCellClassName({ $rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        switch ($rowIndex) {
          case 3:
            return "col-stylethree col-styleone";  //在<style>标签中写class对应这里的字符串名
          default:
            return "col-styleone";
        }
      }
      if ($rowIndex === 3) {
        return "col-stylethree";
      }
    },

        footerMethod({ columns, data }) {
      const footerData = [
        columns.map((column, _columnIndex) => {
          if (_columnIndex === 0) {
            return "平均分";
          }
          for (let i = 2; i <= this.tableColumn.length + 2; i++) {
            if (_columnIndex === i) {
              return this.sumNum(data, column.property, "1");
            }
          }
          return null;
        }),
        columns.map((column, _columnIndex) => {
          if (_columnIndex === 0) {
            return "平均分";
          }
          for (let i = 2; i <= this.tableColumn.length + 2; i++) {
            if (_columnIndex === i) {
              return this.sumNum(data, column.property, "2");
            }
          }
          return null;
        }),
        columns.map((column, _columnIndex) => {
          if (_columnIndex === 0) {
            return "得分";
          }
          for (let i = 2; i <= this.tableColumn.length + 2; i++) {
            return this.meanNum(data, column.property);
          }
          return null;
        }),
      ];
      footerData.push(
        columns.map((column, _columnIndex) => {
          if (_columnIndex === 0) {
            return "排 序";
          }
          let footerData2 = this.vateUtils.judgeType.deepClone(footerData)[2];
          footerData2.splice(0, 2);
          let scoreSortList = [];
          footerData2.forEach((ele, index) => {
            scoreSortList.push({ [index.toString()]: ele });
          });
          for (let i = 2; i <= this.tableColumn.length + 2; i++) {
            if (_columnIndex === i) {
              return this.sortSore(scoreSortList, _columnIndex - 2);
            }
          }
        })
      );
      return footerData;
    },
        meanNum(list, field) {
      let count = 0;
      list.forEach((item) => {
        if (item[field] == undefined) {
          count += 0;
        } else {
          count += Number(item[field]);
        }
      });
      return (count / (list.length / 2)).toFixed(2);
    },
    sumNum(list, field, bidtype) {
      let count = 0;
      list.forEach((item) => {
        if (item.bidType == bidtype && item[field] != undefined) {
          count += Number(item[field]);
        } else {
          count += 0;
        }
      });
      return (count / (list.length / 2)).toFixed(2);
    },
    sortSore(arrList, value) {
      let scoreValue;
      arrList.sort((a, b) => {
        return b[Object.keys(b)[0]] - a[Object.keys(a)[0]];
      });
      arrList.forEach((ele, index) => {
        if (value.toString() == Object.keys(ele)[0]) {
          scoreValue = index + 1;
        }
      });
      return scoreValue;
    },
    

css部分
<style>
.col-styleone {
  background-color: #e4e4e4;
}
.col-stylethree {
  color: red;
}
</style>