列表table，将总行合并为单元格

• 1.汇总列表
• 2.制作一条总线条-------单元格合并
• 3.获取平均值
• 4.如果要编辑分数

1.汇总列表

        
        
        
        
        
        
        
        
        
        
        


  tableData:[
        {date1:1,address:"-"},
        {date1:1,address:10},
        {date1:1,address:10},
        {date1:1,address:10},
        {date1:1,address:10},
        {date1:1,address:10},
        {date1:1,address:10},
        {date1:1,address:10},
        {date1:1,address:10},
        {date1:1,address:10},        
      ],
      height:500,//通过更改此值查询的数据。 解决elementUI table总行起始页未显示问题
      pindex:0,//保存和编辑每条数据时，通过更改此值来更改表格数据。

 methods: {
     // 自定义总计规则
    getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = 合计;
            return;
          }
          console.log(index,index);
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return (Number(prev) + Number(curr) ).toFixed(2);
              } else {
                return Number(prev).toFixed(2);
              }
            }, 0);
            sums[index] += ;
          } else {
            sums[index] = ;
          }
        });
        //自定义总分在此处通过以下方式更改getTableDataScore()方法
       if (
        this.activetabPaneName == "preliminary" 
      ) {
        sums[3] = this.finalScore;
      } else {
        sums[3] = this.finalScore;
      }
        return sums;
      },
  },

2.制作一条总线条-------单元格合并

 // 监控data中的数据更改
  watch: {
    tableDataList:{
        immediate:true,
        async handler(){
          //await this.$nextTick(); 基于实际选择的延迟呼叫
          await this.$nextTick();
          const tables = document.querySelectorAll(#editAbleTrends .el-table__footer-wrapper tr>td);
          console.log(tables,tables);
          tables[0].colSpan=3;
          tables[0].style.textAlign=center
          tables[1].style.display=none
          tables[2].style.display=none
          tables[3].colSpan=3;
          tables[3].style.textAlign=center
          tables[4].style.display=none
          tables[5].style.display=none
       }
    }
 },

也可以写在方法中

 async tableDataList() {
      await this.$nextTick();
        const tables = document.querySelectorAll(
          "#editAbleTrends .el-table__footer-wrapper tr>td"
        );
        console.log("tables", tables);
        tables[0].colSpan = 3;
        tables[0].style.textAlign = "center";
        tables[1].style.display = "none";
        tables[2].style.display = "none";
        tables[3].colSpan = 3;
        tables[3].style.textAlign = "center";
        tables[4].style.display = "none";
        tables[5].style.display = "none";

    },

3.获取平均值

    // 获得最终平均分数
    getTableDataScore() {
      // 将列表中的分数字段放回数组中。
      // 
      const values = this.tableDataChange.map((item) =>Number(item.score));
      //  过滤掉NAN和0，重新分配给另一个阵列
      let value = values.filter((item) => !isNaN(item) && item);
      if (value.length > 0) {
        // 将数组中的所有值相加以获得
        let data = value.reduce((prev, curr) => {
          return (Number(prev) + Number(curr)).toFixed(2);
        });
        this.finalScore = (data / value.length).toFixed(2);
      } else {
        this.finalScore = 0;
      }
      this.tableDataList();
    },

4.如果要编辑分数

// res.data代表接口返回的列表
this.tableData= res.data;
 this.tableData.forEach((item) => {
  item.state = "0";
});  
//
let newV = { ...this.tableData};
let para2 = JSON.parse(JSON.stringify({ newV }));
var arr2 = Object.keys(para2.newV).map(function (i) {
  return para2.newV[i];
});    
//para2是一个全新的阵列this.tableData数据是一致的。
 //  解决elementUI table总行起始页未显示问题
this.height = 501;


        
 


        


// 项目升级对话框编辑
    handleReportingEdit(index) {
      this.pindex++;
      this.tableData[index].state = "1"; //单击以显示保存按钮
    },

//项目升级对话框保存
handleReportingSave(index) {
  // let reg = /^+?[1-9][0-9]*$/;
  let reg = /(^(d|[1-9]d)(.d{1,2})?$)|(^100$)/;
  let b =
    this.tableDataChange[index].score == "-"
      ? true
      : reg.test(this.tableDataChange[index].score);
  if (b == false) {
    this.$message({
      type: "error",
      message: "请输入一个100以内的数字，以保留两位小数。",
    });
  } else {
    this.tableDataChange[index].state = "0"; //单击以显示编辑按钮
    console.log("dfksnzbvf", this.tableDataChange[index].state);
  }
  this.getTableDataScore();//分数变化、调整方法
  this.tableDataList();//这是合并单元格的方法。
  this.pindex++;//刷新表格
},

// 保存
determinePreservation() {
  var num = this.tableDataChange.findIndex((n) => n.state == "1");
  if (num == -1) {
    // 在此处添加保存接口
    console.log("拉拉，我已经攒钱了");
    saveScore(this.tableData)
      .then((res) => {
        this.$message.success("保存成功");
      })
      .catch((err) => {});
    // 保存后，对话框消失
  } else {
    this.$message({
      type: "error",
      message: "请保存每条数据",
    });