日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網(wǎng)站首頁 編程語言 正文

el-table自定義合并行或列

作者:前端開心果 更新時間: 2023-07-30 編程語言

在這里插入圖片描述

ElementUI:通過給table傳入span-method方法可以實現(xiàn)合并行或列,方法的參數(shù)是一個對象,里面包含當前行row、當前列column、當前行號rowIndex、當前列號columnIndex四個屬性。該函數(shù)可以返回一個包含兩個元素的數(shù)組,第一個元素代表rowspan,第二個元素代表colspan。 也可以返回一個鍵名為rowspan和colspan的對象。

模板部分:

    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column prop="date" align="center" label="時間日期" width="120"></el-table-column>
      <el-table-column prop="time" label="單位" width="120"></el-table-column>
      <el-table-column prop="unit" label=""></el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        label="數(shù)值 1(元)">
      </el-table-column>
      <el-table-column
        prop="amount2"
        label="數(shù)值 2(元)">
      </el-table-column>
      <el-table-column
        prop="amount3"
        label="數(shù)值 3(元)">
      </el-table-column>
    </el-table>

js 部分

data() {
  return {
	spanArr: [],
	pos: 0
  }
},
watch: {
  tableData: {
    handler () {
      this.getSpanArr(this.tableData)
    },
    immediate: true
  }
},
methods: {
	// 根據(jù)條件合并隨意行數(shù),因為合并的行數(shù)可能是不固定的(傳入的data參數(shù)為從后臺數(shù)據(jù)數(shù)據(jù))
    getSpanArr(data) {
      this.spanArr = []
      this.pos = 0
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          // 如果是第一條記錄(即索引是0的時候),向數(shù)組中加入1
          this.spanArr.push(1)
          this.pos = 0
        } else {
          if (data[i].date === data[i - 1].date) {
            // 如果date相等就累加,并且push 0 (這里的判斷視自己的判定依據(jù)改變)
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            // 不相等push 1
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 用于設(shè)置要合并的列 0 表示第一列
      if (columnIndex === 0) {
        const cRow = this.spanArr[rowIndex]
        const cCol = cRow > 0 ? 1 : 0
        return {
          rowspan: cRow, // 合并的行數(shù)
          colspan: cCol // 合并的列數(shù),為0表示不顯示
        }
      }
    }
}

原文鏈接:https://blog.csdn.net/qq_38157825/article/details/119211247

  • 上一篇:沒有了
  • 下一篇:沒有了
欄目分類
最近更新