欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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动态表格渲染以及合并逻辑+源码

总结:vue 与elementUI结合使用,数据动态获取生成表格,根据自身业务需求来合并,次处业务需求是合并课程时间,主要是传过来的当前行与前一行的数据比较从而合并,若是要合并行,则要改变判断的条件为行即可,欢迎大家指教,一起探讨学习

本文地址:https://blog.csdn.net/qq_45334070/article/details/107383258