vue+elementUI动态表格渲染以及合并逻辑+源码

程序员文章站 2022-06-22 19:46:23

:span-method=“objectSpanMethod” 为合并绑定的方法，关键性代码，此函数名字可以随意定义，这里定义的是objectSpanMethod结构部分：

课程表

:span-method=“objectSpanMethod” 为合并绑定的方法，关键性代码，此函数名字可以随意定义，这里定义的是objectSpanMethod

结构部分：

  <div class="syllabus">
          <p>课程表</p>
          <el-table :data="tableData" **:span-method="objectSpanMethod"** border style="width:1150px">
            <el-table-column prop="coTime" :resizable="false" label="日期" align="center"></el-table-column>
            <el-table-column prop="One" :resizable="false" label="星期一" align="center"></el-table-column>
            <el-table-column prop="Two" :resizable="false" label="星期二" align="center"></el-table-column>
            <el-table-column prop="Three" :resizable="false" label="星期三" align="center"></el-table-column>
            <el-table-column prop="Four" :resizable="false" label="星期四" align="center"></el-table-column>
            <el-table-column prop="Five" :resizable="false" label="星期五" align="center"></el-table-column>
            <!-- <el-table-column prop="coClassroom" label="教室" align="center"></el-table-column> -->
          </el-table>
          <!-- <span>备注：调课或停课或与课程无关通知信息。</span> -->
       **加粗样式** </div>

处理好的后台的数据：(备注：让后台把课程按照时间排序后在返给你)

     spanArr0: [], //存放每一行记录的合并数
      spanArr1: [], 
      position0: 0, // spanArr0 的索引
      position1: 0, 
      spanArr2: [],
      spanArr3: [], 
      position2: 0,
      position3: 0,
      spanArr4: [], 
      spanArr5: [],
      position4: 0,
      position5: 0, 
      spanArr6: [],
      spanArr7: [], 
      position6: 0, 
      position7: 0, 
tableData: [
        {
          coTime: "10:00~12:00",
          One: "课程：倾向行为训练  老师：诺诺 教室：C001",
          Two: "",
          Three: "",
          Four: "",
          Five: " ",
          Six: "",
          Seven: "",
          coClassroom: "C001"
        },
        {
          coTime: "10:00~12:00",
          One: "",
          Two: "",
          Three: "课程：倾向行为训练  老师：诺诺 教室：C006",
          Four: "",
          Five: " ",
          Six: "",
          Seven: "",
          coClassroom: "C006"
        },
        {
          coTime: "10:00~12:00",
          One: "",
          Two: "课程：日常生活训练  老师：卡卡 教室：C009",
          Three: "",
          Four: "",
          Five: "",
          Six: "",
          Seven: "",
          coClassroom: "C009"
        },
         {
          coTime: "10:00~12:00",
          One: "",
          Two: "",
          Three: "课程：日常生活训练  老师：卡卡 教室：C002",
          Four: "",
          Five: "",
          Six: "",
          Seven: "",
          coClassroom: "C002"
        }
      ],

js逻辑部分：

处理数据的方法：

GetSpanArr() {
      tableData.forEach((element, index) => {
        //遍历数据 得到每项 和下标
        if (index === 0) {
          //如果是一条数据 直接不合并
          this.spanArr1.push(1); //记录合并数
          this.spanArr2.push(1); //记录合并数
          this.spanArr3.push(1);
          this.spanArr4.push(1);
          this.spanArr0.push(1);
          this.spanArr5.push(1);
          this.spanArr6.push(1);
          this.spanArr7.push(1);
          this.position1 = 0; //记录spanArr1的索引值
          this.position2 = 0; //记录spanArr2的索引值
          this.position0 = 0; //记录spanArr1的索引值
          this.position3 = 0; //记录spanArr2的索引值
          this.position4 = 0; //记录spanArr1的索引值
          this.position5 = 0; //记录spanArr2的索引值
          this.position6 = 0; //记录spanArr1的索引值
          this.position7 = 0; //记录spanArr2的索引值
        } else {
          if (element.coTime === tableData[index - 1].coTime) {
            //非第一条数据 则判断是否与上一条相邻的数据值相等
            this.spanArr0[this.position0] += 1; //相等则说明需要合并 rousoan:2 = 合并一行
            this.spanArr0.push(0); //记录索引
          } else {
            this.spanArr0.push(1); //与上一单元格数据不相等 则不合并 rowspan:1 = 不合并
            this.position0 = index; //记录索引
          }
          if (element.One === tableData[index - 1].One) {
            //非第一条数据 则判断是否与上一条相邻的数据值相等
            this.spanArr1[this.position1] += 1; //相等则说明需要合并 rousoan:2 = 合并一行
            this.spanArr1.push(0); //记录索引
          } else {
            this.spanArr1.push(1); //与上一单元格数据不相等 则不合并 rowspan:1 = 不合并
            this.position1 = index; //记录索引
          }
          if (element.Two === tableData[index - 1].Two) {
            //非第一条数据 则判断是否与上一条相邻的数据值相等
            this.spanArr2[this.position2] += 1; //相等则说明需要合并 rousoan:2 = 合并一行
            this.spanArr2.push(0); //记录索引
          } else {
            this.spanArr2.push(1); //与上一单元格数据不相等 则不合并 rowspan:1 = 不合并
            this.position2 = index; //记录索引
          }
          if (element.Three === tableData[index - 1].Three) {
            //非第一条数据 则判断是否与上一条相邻的数据值相等
            this.spanArr3[this.position3] += 1; //相等则说明需要合并 rousoan:2 = 合并一行
            this.spanArr3.push(0); //记录索引
          } else {
            this.spanArr3.push(1); //与上一单元格数据不相等 则不合并 rowspan:1 = 不合并
            this.position3 = index; //记录索引
          }
          if (element.Four === tableData[index - 1].Four) {
            //非第一条数据 则判断是否与上一条相邻的数据值相等
            this.spanArr4[this.position4] += 1; //相等则说明需要合并 rousoan:2 = 合并一行
            this.spanArr4.push(0); //记录索引
          } else {
            this.spanArr4.push(1); //与上一单元格数据不相等 则不合并 rowspan:1 = 不合并
            this.position4 = index; //记录索引
          }
          if (element.Five === tableData[index - 1].Five) {
            //非第一条数据 则判断是否与上一条相邻的数据值相等
            this.spanArr5[this.position5] += 1; //相等则说明需要合并 rousoan:2 = 合并一行
            this.spanArr5.push(0); //记录索引
          } else {
            this.spanArr5.push(1); //与上一单元格数据不相等 则不合并 rowspan:1 = 不合并
            this.position5 = index; //记录索引
          }
          if (element.Six === tableData[index - 1].Six) {
            //非第一条数据 则判断是否与上一条相邻的数据值相等
            this.spanArr6[this.position6] += 1; //相等则说明需要合并 rousoan:2 = 合并一行
            this.spanArr6.push(0); //记录索引
          } else {
            this.spanArr6.push(1); //与上一单元格数据不相等 则不合并 rowspan:1 = 不合并
            this.position6 = index; //记录索引
          }
          if (element.Seven === tableData[index - 1].Seven) {
            //非第一条数据 则判断是否与上一条相邻的数据值相等
            this.spanArr7[this.position7] += 1; //相等则说明需要合并 rousoan:2 = 合并一行
            this.spanArr7.push(0); //记录索引
          } else {
            this.spanArr7.push(1); //与上一单元格数据不相等 则不合并 rowspan:1 = 不合并
            this.position7 = index; //记录索引
          }
        }
      });
    },

关键性代码来了：

objectSpanMethodSmallClass({ row, column, rowIndex, columnIndex }) {
      // 对第一列 进行合并
     // row：传过来的当前一行数据，也就是每一个item
     //rowIndex:每一行数据的的索引
      //column:每一列数据，比如星期一下面的所有数据
      //columnIndex :每一列数据的索引
      
      // 当 当前行与上一行内容相同时 返回0      0 意味着合并
      if (columnIndex === 0) {
        if (
          rowIndex > 0 &&
          row.coTime === this.tableData[rowIndex - 1].coTime
        ) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else {
          let rows = 1;
          //  查询相同的内容有多少行 进行合并（多行合并）
          for (let i = rowIndex; i < this.tableData.length - 1; i++) {
            if (row.coTime === this.tableData[i + 1].coTime) {
              rows++;
            }
          }
          // 返回相同内容的行数
          return {
            rowspan: rows,
            colspan: 1
          };
        }
      }
    },

合并后效果图：

vue+elementUI动态表格渲染以及合并逻辑+源码