el-table 根据某列数据，合单元格&&序号错乱处理，表尾合计

95 阅读 0 评论 63 点赞

我是靠谱客的博主默默玉米，最近开发中收集的这篇文章主要介绍el-table 根据某列数据，合单元格&&序号错乱处理，表尾合计，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

这个需求是根据代号，合并代号相同的，序号，代号，卷数单元格。效果如下：

根据代号相同合并其他单元格关键代码:span-method="objectSpanMethod"具体实现代码：

<el-table
        v-loading="loadingThree"
        :data="boxList"
        border
        :span-method="objectSpanMethod"
        :summary-method="getSummaries"
        show-summary
      >
        <el-table-column label="序号" type="index" align="center" width="250" :index="indexMethod" />
        <el-table-column label="代号" align="center" prop="codeNo" />
        <el-table-column label="卷数" align="center" prop="totalBookNum" />
        <el-table-column label="档案室编号" align="center" prop="archiveNo" />
        <el-table-column label="图片数" align="center" prop="totalPageNum" />
      </el-table>
import { colMethod } from "@/api/business/tableMethod";
data(){
return{
mergeArr: {},//data定义mergeArr
}
}
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < 3) {
        if (
          this.boxList[rowIndex - 1] &&
          this.boxList[rowIndex].codeNo ===
            this.boxList[rowIndex - 1].codeNo
        ) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else if (
          !this.boxList[rowIndex - 1] ||
          (this.boxList[rowIndex - 1] &&
            this.boxList[rowIndex - 1].codeNo !==
              this.boxList[rowIndex].codeNo)
        ) {
          let j = 1;
          for (let i = rowIndex + 1; i <= this.boxList.length - 1; i++) {
            if (
              this.boxList[rowIndex].codeNo == this.boxList[i].codeNo
            ) {
              j++;
            } else {
              break;
            }
          }
          return {
            rowspan: j,
            colspan: 1
          };
        }
      }
      let arr = this.mergeArr[column.property] || [];
      if (arr.length) return arr[rowIndex];
      else [1, 1];
    },
//获取列表的时候调用
getThreeList() {
        this.loadingThree = true
      listThree().then(res => {
        this.loadingThree = false
        if (res.code == 200) {
          this.boxList = res.data.list;
          this.sumBookNum = res.data.sumBookNum;
          this.mergeArr = colMethod(
            ["codeNo", "totalBookNum"],
            this.boxList
          );
          this.indexobj(); //排列序号
        }
      });
    }

这里我在外部写了一个方法引入：在使用colMethod的时候引入

export function colMethod(columnArr, data) {
    // columnArr 合并行所在的列字段
    // data 需要合并的表格数据
    let column = {}
    let position = 0
    // 遍历合并的列数据
    columnArr.forEach((prop) => {
      column[prop] = []
      //  遍历合并的行数据
      data.forEach((row, rowIndex) => {
        // 第N列第一行
        column[prop][rowIndex] = [1, 1]
        if (rowIndex === 0) {
          // 记录当前行号
          position = 0
        } else if (row[prop] === data[rowIndex - 1][prop]) {
          // 当前行数据等于上一行，根据记录的行号，计算需要合并几行。
          column[prop][position][0] += 1
          // 当前行 隐藏不显示
          column[prop][rowIndex][0] = 0
        } else {
          // 不相等之后，重置记录行号
          position = rowIndex
        }
      })
    })
    return column
  }

解决序号错乱的问题主要代码:index="indexMethod"

 // 排列序号
    indexobj() {
      var num = 0;
      this.mergeArr["codeNo"].forEach((item, index) => {
        if (item[0] != 0) {
          this.indexNum[index] = num += 1;
        }
      });
    },
    // 自定义序号
    indexMethod(index) {
      return this.indexNum[index];
    },

合并表尾：:summary-method="getSummaries"

getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (
          
          column.property == "totalPageNum"
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        }
        //被合并的行数据不好算合计 this.sumBookNum这是后端计算的合计，直接拿来用
        if (
          column.property == "totalBookNum" 
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return this.sumBookNum;
            } else {
              return this.sumBookNum;
            }
          }, 0);
          sums[index];
        }
      });
      return sums;
    },

所有代码：

<el-table
        v-loading="loadingThree"
        :data="boxList"
        border
        :span-method="objectSpanMethod"
        :summary-method="getSummaries"
        show-summary
      >
        <el-table-column label="序号" type="index" align="center" width="250" :index="indexMethod" />
        <el-table-column label="代号" align="center" prop="codeNo" />
        <el-table-column label="卷数" align="center" prop="totalBookNum" />
        <el-table-column label="档案室编号" align="center" prop="archiveNo" />
        <el-table-column label="图片数" align="center" prop="totalPageNum" />
      </el-table>

<script>
import { colMethod } from "@/api/business/tableMethod";
import { listOne, listTwo, listThree } from "@/api/business/validateComplete";
export default {
  data() {
    return {
      mergeArr: {},
      indexNum: {},
      boxList: [],
    
    };
  },
  mounted() {
  },
  methods: {
    // 排列序号
    indexobj() {
      var num = 0;
      this.mergeArr["codeNo"].forEach((item, index) => {
        if (item[0] != 0) {
          this.indexNum[index] = num += 1;
        }
      });
    },
    // 自定义序号
    indexMethod(index) {
      return this.indexNum[index];
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < 3) {
        if (
          this.boxList[rowIndex - 1] &&
          this.boxList[rowIndex].codeNo ===
            this.boxList[rowIndex - 1].codeNo
        ) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else if (
          !this.boxList[rowIndex - 1] ||
          (this.boxList[rowIndex - 1] &&
            this.boxList[rowIndex - 1].codeNo !==
              this.boxList[rowIndex].codeNo)
        ) {
          let j = 1;
          for (let i = rowIndex + 1; i <= this.boxList.length - 1; i++) {
            if (
              this.boxList[rowIndex].codeNo == this.boxList[i].codeNo
            ) {
              j++;
            } else {
              break;
            }
          }
          return {
            rowspan: j,
            colspan: 1
          };
        }
      }
      let arr = this.mergeArr[column.property] || [];
      if (arr.length) return arr[rowIndex];
      else [1, 1];
    },
    //指定求和
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (
          
          column.property == "totalPageNum"
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        }
        //被合并的行数据不好算合计 this.sumBookNum这是后端计算的合计，直接拿来用
        if (
          column.property == "totalBookNum" 
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return this.sumBookNum;
            } else {
              return this.sumBookNum;
            }
          }, 0);
          sums[index];
        }
      });
      return sums;
    },
    getThreeList() {
        this.loadingThree = true
      listThree().then(res => {
        this.loadingThree = false
        if (res.code == 200) {
          this.boxList = res.data.list;
          this.sumBookNum = res.data.sumBookNum;
          this.mergeArr = colMethod(
            ["codeNo", "totalBookNum"],
            this.boxList
          );
          this.indexobj(); //排列序号
        }
      });
    }
  }
};
</script>

被引入的模块：

export function colMethod(columnArr, data) {
    // columnArr 合并行所在的列字段
    // data 需要合并的表格数据
    let column = {}
    let position = 0
    // 遍历合并的列数据
    columnArr.forEach((prop) => {
      column[prop] = []
      //  遍历合并的行数据
      data.forEach((row, rowIndex) => {
        // 第N列第一行
        column[prop][rowIndex] = [1, 1]
        if (rowIndex === 0) {
          // 记录当前行号
          position = 0
        } else if (row[prop] === data[rowIndex - 1][prop]) {
          // 当前行数据等于上一行，根据记录的行号，计算需要合并几行。
          column[prop][position][0] += 1
          // 当前行 隐藏不显示
          column[prop][rowIndex][0] = 0
        } else {
          // 不相等之后，重置记录行号
          position = rowIndex
        }
      })
    })
    return column
  }