el-table的span-method合并行方法

最新推荐文章于 2025-03-27 15:15:16 发布

adventureZZ

最新推荐文章于 2025-03-27 15:15:16 发布

阅读量618

点赞数

文章标签： vue.js elementui 前端前端框架 javascript

本文链接：https://blog.youkuaiyun.com/m0_61585720/article/details/132428525

版权

合并前

合并后

实现步骤：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
        <title>el-table行合并</title>
    </head>
    <body>
        <div id="app">
            <el-table
          class="eltable"
          v-loading="loading"
          stripe
          border
          :data="tableData"
          style="width: 100%"
          :span-method="arraySpanMethod"
        >
          <el-table-column width="100" prop="dateString" label="日期"></el-table-column>
          <el-table-column width="200" label="数据类型">
            <template slot-scope="scope">
              {{ typeList[scope.$index % typeList.length] }}
            </template>
          </el-table-column>
        </el-table>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    tableData: [],
                    mergeObj: {},//合并单元格
                    mergeArr: ['dateString'], //合并字段
                    typeList: ['中长期合约均价', '批发成本', '零售均价'],//数据类型
                },
                methods: {
                    GetSYTJDayFX() {
                       sytjDayFX(this.queryParams)
                        .then(res => {
                           this.getSpanArr(res.data);
                        }
                    },
                    getSpanArr(data) {
                      this.mergeArr.forEach((key, index1) => {
                        let count = 0; // 用来记录需要合并行的起始位置
                        this.mergeObj[key] = []; // 记录每一列的合并信息
                        data.forEach((item, index) => {
                          // index == 0表示数据为第一行，直接 push 一个 1
                          if (index === 0) {
                            this.mergeObj[key].push(1);
                          } else {
                            // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
                            if (item[key] === data[index - 1][key]) {
                              this.mergeObj[key][count] += 1;
                              this.mergeObj[key].push(0);
                            } else {
                              // 如果当前行和上一行其值不相等
                              count = index; // 记录当前位置
                              this.mergeObj[key].push(1); // 重新push 一个 1
                            }
                          }
                        });
                      });
                    },
    //合并行
                    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                    // // 判断列的属性
                      if (this.mergeArr.indexOf(column.property) !== -1) {
                      // 判断其值是不是为0
                        if (this.mergeObj[column.property][rowIndex]) {
                          return [this.mergeObj[column.property][rowIndex], 1];
                        } else {
                        // 如果为0则为需要合并的行
                          return [0, 0];
                        }
                      }
                    },
            })
        </script>
    </body>
</html>