自学内容网 自学内容网

el-table 动态计算合并行

原始表格及代码

在这里插入图片描述

<el-table
  :data="tableData"
  class="myTable"
  header-row-class-name="tableHead"
>
  <el-table-column prop="date" label="日期"> </el-table-column>
  <el-table-column prop="name" label="姓名"> </el-table-column>
  <el-table-column prop="project" label="项目"> </el-table-column>
  <el-table-column prop="address" label="地址" min-width="200">
  </el-table-column>
</el-table>
// 模拟数据接口请求并排序
getDataMock() {
  for (var i = 0; i < 10; i++) {
    let randomDay = Math.floor(Math.random() * 5 + 1);
    this.tableData.push({
      date: "2024-12-" + randomDay,
      name: "王小虎" + i,
      project: "项目" + i,
      address: "上海市普陀区金沙江路 " + i + " 弄",
    });
  }
  this.tableData.sort((a, b) => {
    let time1 = new Date(a.date).getTime();
    let time2 = new Date(b.date).getTime();
    return time1 - time2;
  });
},
.myTable {
  width: 700px;
  margin: 0 auto;
  border-radius: 20px;
  .tableHead {
    .el-table__cell {
      background-color: #bee7c5;
      color: #264f30;
      border-bottom: none;
      &:first-child {
        background: #435f5b;
        color: #fff;
      }
    }
  }
  .el-table__body {
    .el-table__row {
      .el-table__cell {
        background: #f7f7f7;
        border-bottom: 1px solid #dcdcdc;
        &:first-child {
          background: #acb2d9;
          color: #32405b;
          font-weight: bold;
          border-bottom: 1px solid #32405b;
        }
      }
    }
  }
}

合并行

  • 需要动态计算表格数据的合并行数
  • 如图所示,需要得到如下的 rowspan
    在这里插入图片描述
  • 计算表格数据每行的 rowspan
// 动态计算合并行的索引
getTableDataSpan(arr) {
  let spanData = []; // 数据数组的 rowspan 集合
  // rowspan > 1,合并行
  // rowspan == 1,单独行,不参与合并
  // rowspan == 0,被合并的行
  let lastRowIndex = 0; // 记录索引
  arr.forEach((item, index) => {
    if (index == 0) {
      // 第一行,默认认为不参与合并,记录为 1
      spanData.push(1);
    } else {
      if (item.date == arr[index - 1].date) {
        // 当前行的 date 与上一行的 date 相同,即当前行 的 rowspan 需要被记为 0
        spanData.push(0);
        // 向前找上次记录的索引,即需要当前行合并过去的目标行,使目标行的 rowspan 值加一
        spanData[lastRowIndex] += 1;
      } else {
        // 当前行的 date 与上一行的 date 不相等,则当前行的 rowspan 记录为 1
        spanData.push(1);
        // 暂且记录一下 lastRowIndex
        // 如果下一行与当前行的 date 值相同,就会合并到当前行,否则会更新 lastRowIndex 的值,进行下次对比
        lastRowIndex = index;
      }
    }
  });
  return {
    spanData: spanData,
    lastRowIndex: lastRowIndex,
  };
},
  • 计算 span-method 属性
 <el-table
   :data="tableData"
   class="myTable"
   header-row-class-name="tableHead"
   :span-method="spanMethod"
 >
 ...
spanMethod({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    // 只有第一列需要合并,所以限定为 columnIndex === 0
    // 获取当前行的 rowspan
    let rowspan = this.getTableDataSpan(this.tableData).spanData[rowIndex];
    let colspan = rowspan === 0 ? 0 : 1; // 被合并到其他行,需要为 colspan 赋值为 0,否则为 1
    return {
      rowspan: rowspan,
      colspan: colspan,
    };
  }
},

样式调整优化

  • 上述代码得到如下效果
  • 原因是被合并的行,删掉了首列,被赋予了 first-child 的样式

在这里插入图片描述

  • 调整样式,为首列元素动态赋予类名
<el-table
  :data="tableData"
  class="myTable"
  header-row-class-name="tableHead"
  :span-method="spanMethod"
  :cell-class-name="cellClassName"
>
...
cellClassName({ row, column, rowIndex, columnIndex }) {
 if (columnIndex === 0) {
    return "colorBox"; // 首列添加类名
  }
},
.el-table__body {
.el-table__row {
   .el-table__cell {
     background: #f7f7f7;
     border-bottom: 1px solid #dcdcdc;
     &.colorBox {
       background: #acb2d9;
       color: #32405b;
       font-weight: bold;
       border-bottom: 1px solid #32405b;
     }
   }
 }
}
  • 效果如图,会发现,动态赋予的 colorBox 类名,并没有被加到被合并的行的首列元素上
    在这里插入图片描述

完整代码段

<template>
  <div class="tableBox">
    <el-table
      :data="tableData"
      class="myTable"
      header-row-class-name="tableHead"
      :span-method="spanMethod"
      :cell-class-name="cellClassName"
    >
      <el-table-column prop="date" label="日期"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="project" label="项目"> </el-table-column>
      <el-table-column prop="address" label="地址" min-width="200">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "dataList",
  components: {},
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    this.getDataMock();
  },
  methods: {
    getDataMock() {
      for (var i = 0; i < 10; i++) {
        let randomDay = Math.floor(Math.random() * 5 + 1);
        this.tableData.push({
          date: "2024-12-" + randomDay,
          name: "王小虎" + i,
          project: "项目" + i,
          address: "上海市普陀区金沙江路 " + i + " 弄",
        });
      }
      this.tableData.sort((a, b) => {
        let time1 = new Date(a.date).getTime();
        let time2 = new Date(b.date).getTime();
        return time1 - time2;
      });
    },
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return "colorBox";
      }
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 只有第一列需要合并,所以限定为 columnIndex === 0
        // 获取当前行的 rowspan
        let rowspan = this.getTableDataSpan(this.tableData).spanData[rowIndex];
        let colspan = rowspan === 0 ? 0 : 1; // 被合并到其他行,需要为 colspan 赋值为 0,否则为 1
        return {
          rowspan: rowspan,
          colspan: colspan,
        };
      }
    },
    // 动态计算合并行的索引
    getTableDataSpan(arr) {
      let spanData = []; // 数据数组的 rowspan 集合
      // rowspan > 1,合并行
      // rowspan == 1,单独行,不参与合并
      // rowspan == 0,被合并的行
      let lastRowIndex = 0; // 记录索引
      arr.forEach((item, index) => {
        if (index == 0) {
          // 第一行,默认认为不参与合并,记录为 1
          spanData.push(1);
        } else {
          if (item.date == arr[index - 1].date) {
            // 当前行的 date 与上一行的 date 相同,即当前行 的 rowspan 需要被记为 0
            spanData.push(0);
            // 向前找上次记录的索引,即需要当前行合并过去的目标行,使目标行的 rowspan 值加一
            spanData[lastRowIndex] += 1;
          } else {
            // 当前行的 date 与上一行的 date 不相等,则当前行的 rowspan 记录为 1
            spanData.push(1);
            // 暂且记录一下 lastRowIndex
            // 如果下一行与当前行的 date 值相同,就会合并到当前行,否则会更新 lastRowIndex 的值,进行下次对比
            lastRowIndex = index;
          }
        }
      });
      return {
        spanData: spanData,
        lastRowIndex: lastRowIndex,
      };
    },
  },
};
</script>
<style lang="less" scoped>
.tableBox {
  background: #fff;
  padding: 50px 0;
  /deep/ .myTable {
    width: 700px;
    margin: 0 auto;
    border-radius: 20px;
    .tableHead {
      .el-table__cell {
        background-color: #bee7c5;
        color: #264f30;
        border-bottom: none;
        &:first-child {
          background: #435f5b;
          color: #fff;
        }
      }
    }
    .el-table__body {
      .el-table__row {
        .el-table__cell {
          background: #f7f7f7;
          border-bottom: 1px solid #dcdcdc;
          &.colorBox {
            background: #acb2d9;
            color: #32405b;
            font-weight: bold;
            border-bottom: 1px solid #32405b;
          }
        }
      }
    }
  }
}
</style>

原文地址:https://blog.csdn.net/weixin_42154189/article/details/144445581

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!