liang14658fox

Appearance

动态合并el-table单元格 ​

初始表格

html
<el-table
  :data="tableData_origin"
  border
  :header-cell-style="{ textAlign: 'center', backgroundColor: '#F5F7FA' }"
>
  <el-table-column prop="School" label="学校" align="center">
  </el-table-column>
  <el-table-column prop="Grade" label="年级" align="center" />
  <el-table-column prop="Name" label="姓名" align="center" />
  <el-table-column prop="Chinese" label="语文" align="center" />
  <el-table-column prop="Math" label="数学" align="center" />
  <el-table-column prop="English" label="英语" align="center" />
  <el-table-column prop="k_Class" label="班级" align="center" />
</el-table>
<el-table
  :data="tableData_origin"
  border
  :header-cell-style="{ textAlign: 'center', backgroundColor: '#F5F7FA' }"
>
  <el-table-column prop="School" label="学校" align="center">
  </el-table-column>
  <el-table-column prop="Grade" label="年级" align="center" />
  <el-table-column prop="Name" label="姓名" align="center" />
  <el-table-column prop="Chinese" label="语文" align="center" />
  <el-table-column prop="Math" label="数学" align="center" />
  <el-table-column prop="English" label="英语" align="center" />
  <el-table-column prop="k_Class" label="班级" align="center" />
</el-table>

合并单元格之后

html
<el-table
  :data="tableData"
  :span-method="objectSpanMethod"
  border
  :header-cell-style="{ textAlign: 'center', backgroundColor: '#F5F7FA' }"
>
  <el-table-column prop="School" label="学校" align="center">
  </el-table-column>
  <el-table-column prop="Grade" label="年级" align="center" />
  <el-table-column prop="k_Class" label="班级" align="center" />
  <el-table-column prop="Name" label="姓名" align="center" />
  <el-table-column prop="Chinese" label="语文" align="center" />
  <el-table-column prop="Math" label="数学" align="center" />
  <el-table-column prop="English" label="英语" align="center" />
</el-table>
<el-table
  :data="tableData"
  :span-method="objectSpanMethod"
  border
  :header-cell-style="{ textAlign: 'center', backgroundColor: '#F5F7FA' }"
>
  <el-table-column prop="School" label="学校" align="center">
  </el-table-column>
  <el-table-column prop="Grade" label="年级" align="center" />
  <el-table-column prop="k_Class" label="班级" align="center" />
  <el-table-column prop="Name" label="姓名" align="center" />
  <el-table-column prop="Chinese" label="语文" align="center" />
  <el-table-column prop="Math" label="数学" align="center" />
  <el-table-column prop="English" label="英语" align="center" />
</el-table>
js
export default {
  data () {
    return {
      // 存放所有的表头 一定要与tableData一致
      colFields: [
        "School",
        "Grade",
        "k_Class",
        "Name",
        "Chinese",
        "Math",
        "English",
      ],
      spanArr: [], //存储合并单元格的开始位置
      // 表格数据
      tableData: [],
      tableData_origin: [
        // 一年级
        {
          School: "第一小学",
          Grade: "1年级",
          k_Class: "1班",
          Name: "张三",
          Chinese: "90",
          Math: "100",
          English: "1",
        }, {
          School: "第一小学",
          Grade: "1年级",
          k_Class: "1班",
          Name: "张三",
          Chinese: "90",
          Math: "100",
          English: "12",
        },
        {
          School: "第一小学",
          Grade: "1年级",
          k_Class: "1班",
          Name: "张伟",
          Chinese: "90",
          Math: "99",
          English: "89",
        },
        {
          School: "第一小学",
          Grade: "1年级",
          k_Class: "2班",
          Name: "李四",
          Chinese: "90",
          Math: "85",
          English: "123",
        },
        {
          School: "第一小学",
          Grade: "1年级",
          k_Class: "3班",
          Name: "王五",
          Chinese: "79",
          Math: "100",
          English: "1234",
        },
        // 二年级
        {
          School: "第一小学",
          Grade: "2年级",
          k_Class: "1班",
          Name: "赵六",
          Chinese: "95",
          Math: "100",
          English: "1234",
        },
        {
          School: "第一小学",
          Grade: "2年级",
          k_Class: "2班",
          Name: "钱八",
          Chinese: "98",
          Math: "85",
          English: "12354",
        },
        {
          School: "第一小学",
          Grade: "2年级",
          k_Class: "2班",
          Name: "张三",
          Chinese: "98",
          Math: "85",
          English: "12354",
        },
        {
          School: "第一小学",
          Grade: "2年级",
          k_Class: "3班",
          Name: "陈九",
          Chinese: "79",
          Math: "100",
          English: "100",
        },
        // 三年级
        {
          School: "第一小学",
          Grade: "3年级",
          k_Class: "1班",
          Name: "黄十",
          Chinese: "91",
          Math: "88",
          English: "12354",
        },
        {
          School: "第一小学",
          Grade: "3年级",
          k_Class: "2班",
          Name: "魏一",
          Chinese: "90",
          Math: "86",
          English: "87",
        },
        {
          School: "第一小学",
          Grade: "3年级",
          k_Class: "3班",
          Name: "杨二",
          Chinese: "79",
          Math: "99",
          English: "12354",
        },
        // 第二小学
        {
          School: "第二小学",
          Grade: "3年级",
          k_Class: "3班",
          Name: "袁零",
          Chinese: "79",
          Math: "99",
          English: "123546",
        },
        {
          School: "第二小学",
          Grade: "3年级",
          k_Class: "2班",
          Name: "袁零2",
          Chinese: "79",
          Math: "99",
          English: "123546",
        },
        {
          School: "第二小学",
          Grade: "3年级",
          k_Class: "2班",
          Name: "袁零3",
          Chinese: "79",
          Math: "99",
          English: "123546",
        },
      ],
    };
  },
  methods: {
    /**
     * 分析每一列，找出相同的
     * @param data
     */
    getSpanArr () {
      this.tableData = JSON.parse(JSON.stringify(this.tableData_origin));
      for (let i = 0; i < this.tableData.length; i++) {
        let row = i;
        // let col = i % this.colCount;
        if (row === 0) {
          // i 表示行 j表示列
          for (let j = 0; j < this.colFields.length; j++) {
            this.spanArr[i * this.colFields.length + j] = {
              rowspan: 1,
              colspan: 1,
            };
          }
        } else {
          for (let j = 0; j < this.colFields.length; j++) {
            // 当前和上一次的一样
            //  合并所有列的相同数据单元格
            if (
              this.colFields[j] == "School" ||
              this.colFields[j] == "Grade" ||
              this.colFields[j] == "k_Class" ||
              this.colFields[j] == "Name" ||
              this.colFields[j] == "Chinese" ||
              this.colFields[j] == "Math" ||
              this.colFields[j] == "English"

            ) { // 指定合并哪些列
              if (
                this.tableData[row]["Grade"] !==
                this.tableData[row - 1]["Grade"]
              ) { // 哪些不合并:School不一样的,不合并
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1,
                  colspan: 1,
                };
              } else if (
                this.colFields[j] == "Name" ||
                this.colFields[j] == "Chinese" ||
                this.colFields[j] == "Math"
              ) { // 哪些不合并:School不一样的,不合并
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1,
                  colspan: 1,
                };
              } else if (
                (this.tableData[row][this.colFields[j]] ===
                  this.tableData[row - 1][this.colFields[j]])
              ) {
                let beforeItem =
                  this.spanArr[(row - 1) * this.colFields.length + j];
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1 + beforeItem.rowspan,// 合并几列
                  colspan: 1,// 合并几行
                };
                beforeItem.rowspan = 0;
                beforeItem.colspan = 0;
              } else {
                // rowspan 和 colspan 都为1表格此单元格不合并
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1,
                  colspan: 1,
                };
              }
            }
          }
        }
      }
      // 对数据进行倒序
      let stack = [];
      for (let i = 0; i < this.colFields.length; i++) {
        for (let j = 0; j < this.tableData.length; j++) {
          // console.log("i=" + i + " j=" + j);
          // i 表示列 j表示行
          if (j === 0) {
            if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
              stack.push(this.spanArr[j * this.colFields.length + i]);
            }
          } else {
            if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
              stack.push(this.spanArr[j * this.colFields.length + i]);
            } else {
              stack.push(this.spanArr[j * this.colFields.length + i]);
              while (stack.length > 0) {
                let pop = stack.pop();
                let len = stack.length;
                this.spanArr[(j - len) * this.colFields.length + i] = pop;
              }
            }
          }
        }
      }
      // console.log(this.spanArr);
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      // console.log(this.spanArr[rowIndex * this.colFields.length + columnIndex]);
      return this.spanArr[rowIndex * this.colFields.length + columnIndex];
    },
  },
  mounted () {
    this.getSpanArr();
  },
};
export default {
  data () {
    return {
      // 存放所有的表头 一定要与tableData一致
      colFields: [
        "School",
        "Grade",
        "k_Class",
        "Name",
        "Chinese",
        "Math",
        "English",
      ],
      spanArr: [], //存储合并单元格的开始位置
      // 表格数据
      tableData: [],
      tableData_origin: [
        // 一年级
        {
          School: "第一小学",
          Grade: "1年级",
          k_Class: "1班",
          Name: "张三",
          Chinese: "90",
          Math: "100",
          English: "1",
        }, {
          School: "第一小学",
          Grade: "1年级",
          k_Class: "1班",
          Name: "张三",
          Chinese: "90",
          Math: "100",
          English: "12",
        },
        {
          School: "第一小学",
          Grade: "1年级",
          k_Class: "1班",
          Name: "张伟",
          Chinese: "90",
          Math: "99",
          English: "89",
        },
        {
          School: "第一小学",
          Grade: "1年级",
          k_Class: "2班",
          Name: "李四",
          Chinese: "90",
          Math: "85",
          English: "123",
        },
        {
          School: "第一小学",
          Grade: "1年级",
          k_Class: "3班",
          Name: "王五",
          Chinese: "79",
          Math: "100",
          English: "1234",
        },
        // 二年级
        {
          School: "第一小学",
          Grade: "2年级",
          k_Class: "1班",
          Name: "赵六",
          Chinese: "95",
          Math: "100",
          English: "1234",
        },
        {
          School: "第一小学",
          Grade: "2年级",
          k_Class: "2班",
          Name: "钱八",
          Chinese: "98",
          Math: "85",
          English: "12354",
        },
        {
          School: "第一小学",
          Grade: "2年级",
          k_Class: "2班",
          Name: "张三",
          Chinese: "98",
          Math: "85",
          English: "12354",
        },
        {
          School: "第一小学",
          Grade: "2年级",
          k_Class: "3班",
          Name: "陈九",
          Chinese: "79",
          Math: "100",
          English: "100",
        },
        // 三年级
        {
          School: "第一小学",
          Grade: "3年级",
          k_Class: "1班",
          Name: "黄十",
          Chinese: "91",
          Math: "88",
          English: "12354",
        },
        {
          School: "第一小学",
          Grade: "3年级",
          k_Class: "2班",
          Name: "魏一",
          Chinese: "90",
          Math: "86",
          English: "87",
        },
        {
          School: "第一小学",
          Grade: "3年级",
          k_Class: "3班",
          Name: "杨二",
          Chinese: "79",
          Math: "99",
          English: "12354",
        },
        // 第二小学
        {
          School: "第二小学",
          Grade: "3年级",
          k_Class: "3班",
          Name: "袁零",
          Chinese: "79",
          Math: "99",
          English: "123546",
        },
        {
          School: "第二小学",
          Grade: "3年级",
          k_Class: "2班",
          Name: "袁零2",
          Chinese: "79",
          Math: "99",
          English: "123546",
        },
        {
          School: "第二小学",
          Grade: "3年级",
          k_Class: "2班",
          Name: "袁零3",
          Chinese: "79",
          Math: "99",
          English: "123546",
        },
      ],
    };
  },
  methods: {
    /**
     * 分析每一列，找出相同的
     * @param data
     */
    getSpanArr () {
      this.tableData = JSON.parse(JSON.stringify(this.tableData_origin));
      for (let i = 0; i < this.tableData.length; i++) {
        let row = i;
        // let col = i % this.colCount;
        if (row === 0) {
          // i 表示行 j表示列
          for (let j = 0; j < this.colFields.length; j++) {
            this.spanArr[i * this.colFields.length + j] = {
              rowspan: 1,
              colspan: 1,
            };
          }
        } else {
          for (let j = 0; j < this.colFields.length; j++) {
            // 当前和上一次的一样
            //  合并所有列的相同数据单元格
            if (
              this.colFields[j] == "School" ||
              this.colFields[j] == "Grade" ||
              this.colFields[j] == "k_Class" ||
              this.colFields[j] == "Name" ||
              this.colFields[j] == "Chinese" ||
              this.colFields[j] == "Math" ||
              this.colFields[j] == "English"

            ) { // 指定合并哪些列
              if (
                this.tableData[row]["Grade"] !==
                this.tableData[row - 1]["Grade"]
              ) { // 哪些不合并:School不一样的,不合并
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1,
                  colspan: 1,
                };
              } else if (
                this.colFields[j] == "Name" ||
                this.colFields[j] == "Chinese" ||
                this.colFields[j] == "Math"
              ) { // 哪些不合并:School不一样的,不合并
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1,
                  colspan: 1,
                };
              } else if (
                (this.tableData[row][this.colFields[j]] ===
                  this.tableData[row - 1][this.colFields[j]])
              ) {
                let beforeItem =
                  this.spanArr[(row - 1) * this.colFields.length + j];
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1 + beforeItem.rowspan,// 合并几列
                  colspan: 1,// 合并几行
                };
                beforeItem.rowspan = 0;
                beforeItem.colspan = 0;
              } else {
                // rowspan 和 colspan 都为1表格此单元格不合并
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1,
                  colspan: 1,
                };
              }
            }
          }
        }
      }
      // 对数据进行倒序
      let stack = [];
      for (let i = 0; i < this.colFields.length; i++) {
        for (let j = 0; j < this.tableData.length; j++) {
          // console.log("i=" + i + " j=" + j);
          // i 表示列 j表示行
          if (j === 0) {
            if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
              stack.push(this.spanArr[j * this.colFields.length + i]);
            }
          } else {
            if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
              stack.push(this.spanArr[j * this.colFields.length + i]);
            } else {
              stack.push(this.spanArr[j * this.colFields.length + i]);
              while (stack.length > 0) {
                let pop = stack.pop();
                let len = stack.length;
                this.spanArr[(j - len) * this.colFields.length + i] = pop;
              }
            }
          }
        }
      }
      // console.log(this.spanArr);
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      // console.log(this.spanArr[rowIndex * this.colFields.length + columnIndex]);
      return this.spanArr[rowIndex * this.colFields.length + columnIndex];
    },
  },
  mounted () {
    this.getSpanArr();
  },
};

隔N个列动态合并单元格的行 ​

初始表格

html
<el-table
  :data="tableData_origin"
  border
  :header-cell-style="{ textAlign: 'center', backgroundColor: '#F5F7FA' }"
>
  <el-table-column
    prop="trailerPerson"
    label="拖车人姓名"
    align="center"
    width="150px"
  >
  </el-table-column>
  <el-table-column
    prop="trailerNum"
    label="拖车人数"
    align="center"
    width="80px"
  />
  <el-table-column
    prop="trailerTypeDic"
    label="拖车类型"
    align="center"
    width="150px"
  />
  <el-table-column
    prop="num"
    label="作业次数"
    align="center"
    width="50px"
  />
  <el-table-column
    prop="variousTypesOfAverages"
    label="各类拖车处置平均用时"
    align="center"
    width="150px"
  />
  <el-table-column
    prop="averageTime"
    label="平均处置用时"
    align="center"
    width="150px"
  />
</el-table>
<el-table
  :data="tableData_origin"
  border
  :header-cell-style="{ textAlign: 'center', backgroundColor: '#F5F7FA' }"
>
  <el-table-column
    prop="trailerPerson"
    label="拖车人姓名"
    align="center"
    width="150px"
  >
  </el-table-column>
  <el-table-column
    prop="trailerNum"
    label="拖车人数"
    align="center"
    width="80px"
  />
  <el-table-column
    prop="trailerTypeDic"
    label="拖车类型"
    align="center"
    width="150px"
  />
  <el-table-column
    prop="num"
    label="作业次数"
    align="center"
    width="50px"
  />
  <el-table-column
    prop="variousTypesOfAverages"
    label="各类拖车处置平均用时"
    align="center"
    width="150px"
  />
  <el-table-column
    prop="averageTime"
    label="平均处置用时"
    align="center"
    width="150px"
  />
</el-table>

合并单元格之后 有时要求单元格列之间间隔几个不需要合并的列，而后面需要合并的行收到最前方几列的限制

html
<el-table
  :data="tableData"
  :span-method="objectSpanMethod"
  border
  :header-cell-style="{ textAlign: 'center', backgroundColor: '#F5F7FA' }"
>
  <el-table-column
    prop="trailerPerson"
    label="拖车人姓名"
    align="center"
    width="150px"
  >
  </el-table-column>
  <el-table-column
    prop="trailerNum"
    label="拖车人数"
    align="center"
    width="80px"
  />
  <el-table-column
    prop="trailerTypeDic"
    label="拖车类型"
    align="center"
    width="150px"
  />
  <el-table-column
    prop="num"
    label="作业次数"
    align="center"
    width="50px"
  />
  <el-table-column
    prop="variousTypesOfAverages"
    label="各类拖车处置平均用时"
    align="center"
    width="150px"
  />
  <el-table-column
    prop="averageTime"
    label="平均处置用时"
    align="center"
    width="150px"
  />
</el-table>
<el-table
  :data="tableData"
  :span-method="objectSpanMethod"
  border
  :header-cell-style="{ textAlign: 'center', backgroundColor: '#F5F7FA' }"
>
  <el-table-column
    prop="trailerPerson"
    label="拖车人姓名"
    align="center"
    width="150px"
  >
  </el-table-column>
  <el-table-column
    prop="trailerNum"
    label="拖车人数"
    align="center"
    width="80px"
  />
  <el-table-column
    prop="trailerTypeDic"
    label="拖车类型"
    align="center"
    width="150px"
  />
  <el-table-column
    prop="num"
    label="作业次数"
    align="center"
    width="50px"
  />
  <el-table-column
    prop="variousTypesOfAverages"
    label="各类拖车处置平均用时"
    align="center"
    width="150px"
  />
  <el-table-column
    prop="averageTime"
    label="平均处置用时"
    align="center"
    width="150px"
  />
</el-table>
js
export default {
  data () {
    return {
      // 存放所有的表头 一定要与tableData一致
      colFields: [
        "trailerPerson",
        "trailerNum",
        "num",
        "trailerTypeDic",
        "variousTypesOfAverages",
        "averageTime",
      ],
      spanArr: [], //存储合并单元格的开始位置
      // 表格数据
      tableData: [],
      tableData_origin: [
        {
          "trailerPerson": '张三',
          "trailerNum": '单人',
          "trailerTypeDic": '小拖车',
          "num": 1,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '单人',
          "trailerTypeDic": '大拖车',
          "num": 2,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '单人',
          "trailerTypeDic": '大平板',
          "num": 3,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '单人',
          "trailerTypeDic": '小平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '双人',
          "trailerTypeDic": '小拖车',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '双人',
          "trailerTypeDic": '大拖车',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '双人',
          "trailerTypeDic": '大平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '双人',
          "trailerTypeDic": '小平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '多人',
          "trailerTypeDic": '小拖车',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '多人',
          "trailerTypeDic": '大拖车',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '多人',
          "trailerTypeDic": '大平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '多人',
          "trailerTypeDic": '小平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '单人',
          "trailerTypeDic": '小拖车',
          "num": 1,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '单人',
          "trailerTypeDic": '大拖车',
          "num": 2,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '单人',
          "trailerTypeDic": '大平板',
          "num": 3,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '单人',
          "trailerTypeDic": '小平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '双人',
          "trailerTypeDic": '小拖车',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '双人',
          "trailerTypeDic": '大拖车',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '双人',
          "trailerTypeDic": '大平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '双人',
          "trailerTypeDic": '小平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '多人',
          "trailerTypeDic": '小拖车',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '多人',
          "trailerTypeDic": '大拖车',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '多人',
          "trailerTypeDic": '大平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '多人',
          "trailerTypeDic": '小平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '老五',
          "trailerNum": '多人',
          "trailerTypeDic": '小平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        },
      ],
    };
  },
  mounted () {
    this.getSpanArr();
  },
  methods: {
    getSpanArr () {
      this.tableData = JSON.parse(JSON.stringify(this.tableData_origin));
      for (let i = 0; i < this.tableData.length; i++) {
        let row = i;
        // let col = i % this.colCount;
        if (row === 0) {
          // i 表示行 j表示列
          for (let j = 0; j < this.colFields.length; j++) {
            this.spanArr[i * this.colFields.length + j] = {
              rowspan: 1,
              colspan: 1,
            };
          }
        } else {
          for (let j = 0; j < this.colFields.length; j++) {
            //  合并所有列的相同数据单元格
            if (
              this.colFields[j] == "trailerPerson" ||
              this.colFields[j] == "trailerNum" ||
              this.colFields[j] == "num" ||
              this.colFields[j] == "trailerTypeDic" ||
              this.colFields[j] == "variousTypesOfAverages" ||
              this.colFields[j] == "averageTime"
            ) { // 指定合并哪些列
              if (
                (this.tableData[row]["trailerPerson"] !==
                  this.tableData[row - 1]["trailerPerson"]) || (this.tableData[row]["trailerNum"] !==
                    this.tableData[row - 1]["trailerNum"] &&
                    this.colFields[j] == "averageTime")
                // 这里如果指定拖车人姓名和拖车人数同时作为限制的话，拖车人姓名也会被拖车人数切开，所以加一个trailerNum&&averageTime的限制
              ) { // 哪些不合并:trailerPerson、trailerNum不一样的,不合并
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1,
                  colspan: 1,
                };
              } else if (
                this.colFields[j] == "num" ||
                this.colFields[j] == "trailerTypeDic" ||
                this.colFields[j] == "variousTypesOfAverages"
              ) { // 首先，合并所有列的相同数据单元格，然后再剔除不需要合并的单元格，否则会出现显示BUG
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1,
                  colspan: 1,
                };
              } else if (
                this.tableData[row][this.colFields[j]] ===
                this.tableData[row - 1][this.colFields[j]]
              ) {
                let beforeItem =
                  this.spanArr[(row - 1) * this.colFields.length + j];
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1 + beforeItem.rowspan,// 合并几列
                  colspan: 1,// 合并几行
                };
                beforeItem.rowspan = 0;
                beforeItem.colspan = 0;
              } else {
                // rowspan 和 colspan 都为1表格此单元格不合并
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1,
                  colspan: 1,
                };
              }
            }
          }
        }
      }
      // 对数据进行倒序
      let stack = [];
      for (let i = 0; i < this.colFields.length; i++) {
        for (let j = 0; j < this.tableData.length; j++) {
          // console.log("i=" + i + " j=" + j);
          // i 表示列 j表示行
          if (j === 0) {
            if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
              stack.push(this.spanArr[j * this.colFields.length + i]);
            }
          } else {
            if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
              stack.push(this.spanArr[j * this.colFields.length + i]);
            } else {
              stack.push(this.spanArr[j * this.colFields.length + i]);
              while (stack.length > 0) {
                let pop = stack.pop();
                let len = stack.length;
                this.spanArr[(j - len) * this.colFields.length + i] = pop;
              }
            }
          }
        }
      }
      // console.log(this.spanArr);
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      // console.log(this.spanArr[rowIndex * this.colFields.length + columnIndex]);
      return this.spanArr[rowIndex * this.colFields.length + columnIndex];
    },
  },
};
export default {
  data () {
    return {
      // 存放所有的表头 一定要与tableData一致
      colFields: [
        "trailerPerson",
        "trailerNum",
        "num",
        "trailerTypeDic",
        "variousTypesOfAverages",
        "averageTime",
      ],
      spanArr: [], //存储合并单元格的开始位置
      // 表格数据
      tableData: [],
      tableData_origin: [
        {
          "trailerPerson": '张三',
          "trailerNum": '单人',
          "trailerTypeDic": '小拖车',
          "num": 1,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '单人',
          "trailerTypeDic": '大拖车',
          "num": 2,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '单人',
          "trailerTypeDic": '大平板',
          "num": 3,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '单人',
          "trailerTypeDic": '小平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '双人',
          "trailerTypeDic": '小拖车',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '双人',
          "trailerTypeDic": '大拖车',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '双人',
          "trailerTypeDic": '大平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '双人',
          "trailerTypeDic": '小平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '多人',
          "trailerTypeDic": '小拖车',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '多人',
          "trailerTypeDic": '大拖车',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '多人',
          "trailerTypeDic": '大平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '张三',
          "trailerNum": '多人',
          "trailerTypeDic": '小平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '单人',
          "trailerTypeDic": '小拖车',
          "num": 1,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '单人',
          "trailerTypeDic": '大拖车',
          "num": 2,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '单人',
          "trailerTypeDic": '大平板',
          "num": 3,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '单人',
          "trailerTypeDic": '小平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '双人',
          "trailerTypeDic": '小拖车',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '双人',
          "trailerTypeDic": '大拖车',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '双人',
          "trailerTypeDic": '大平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '双人',
          "trailerTypeDic": '小平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '多人',
          "trailerTypeDic": '小拖车',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '多人',
          "trailerTypeDic": '大拖车',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '多人',
          "trailerTypeDic": '大平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '李四',
          "trailerNum": '多人',
          "trailerTypeDic": '小平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        }, {
          "trailerPerson": '老五',
          "trailerNum": '多人',
          "trailerTypeDic": '小平板',
          "num": 4,
          "variousTypesOfAverages": 139.7143,
          "averageTime": 12,
        },
      ],
    };
  },
  mounted () {
    this.getSpanArr();
  },
  methods: {
    getSpanArr () {
      this.tableData = JSON.parse(JSON.stringify(this.tableData_origin));
      for (let i = 0; i < this.tableData.length; i++) {
        let row = i;
        // let col = i % this.colCount;
        if (row === 0) {
          // i 表示行 j表示列
          for (let j = 0; j < this.colFields.length; j++) {
            this.spanArr[i * this.colFields.length + j] = {
              rowspan: 1,
              colspan: 1,
            };
          }
        } else {
          for (let j = 0; j < this.colFields.length; j++) {
            //  合并所有列的相同数据单元格
            if (
              this.colFields[j] == "trailerPerson" ||
              this.colFields[j] == "trailerNum" ||
              this.colFields[j] == "num" ||
              this.colFields[j] == "trailerTypeDic" ||
              this.colFields[j] == "variousTypesOfAverages" ||
              this.colFields[j] == "averageTime"
            ) { // 指定合并哪些列
              if (
                (this.tableData[row]["trailerPerson"] !==
                  this.tableData[row - 1]["trailerPerson"]) || (this.tableData[row]["trailerNum"] !==
                    this.tableData[row - 1]["trailerNum"] &&
                    this.colFields[j] == "averageTime")
                // 这里如果指定拖车人姓名和拖车人数同时作为限制的话，拖车人姓名也会被拖车人数切开，所以加一个trailerNum&&averageTime的限制
              ) { // 哪些不合并:trailerPerson、trailerNum不一样的,不合并
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1,
                  colspan: 1,
                };
              } else if (
                this.colFields[j] == "num" ||
                this.colFields[j] == "trailerTypeDic" ||
                this.colFields[j] == "variousTypesOfAverages"
              ) { // 首先，合并所有列的相同数据单元格，然后再剔除不需要合并的单元格，否则会出现显示BUG
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1,
                  colspan: 1,
                };
              } else if (
                this.tableData[row][this.colFields[j]] ===
                this.tableData[row - 1][this.colFields[j]]
              ) {
                let beforeItem =
                  this.spanArr[(row - 1) * this.colFields.length + j];
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1 + beforeItem.rowspan,// 合并几列
                  colspan: 1,// 合并几行
                };
                beforeItem.rowspan = 0;
                beforeItem.colspan = 0;
              } else {
                // rowspan 和 colspan 都为1表格此单元格不合并
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1,
                  colspan: 1,
                };
              }
            }
          }
        }
      }
      // 对数据进行倒序
      let stack = [];
      for (let i = 0; i < this.colFields.length; i++) {
        for (let j = 0; j < this.tableData.length; j++) {
          // console.log("i=" + i + " j=" + j);
          // i 表示列 j表示行
          if (j === 0) {
            if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
              stack.push(this.spanArr[j * this.colFields.length + i]);
            }
          } else {
            if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
              stack.push(this.spanArr[j * this.colFields.length + i]);
            } else {
              stack.push(this.spanArr[j * this.colFields.length + i]);
              while (stack.length > 0) {
                let pop = stack.pop();
                let len = stack.length;
                this.spanArr[(j - len) * this.colFields.length + i] = pop;
              }
            }
          }
        }
      }
      // console.log(this.spanArr);
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      // console.log(this.spanArr[rowIndex * this.colFields.length + columnIndex]);
      return this.spanArr[rowIndex * this.colFields.length + columnIndex];
    },
  },
};