element-UI 合并单元格

Lewis
2022-05-14 / 0 评论 / 34 阅读 / 正在检测是否收录...
<el-table
                :data="dataList"
                border
                :span-method="spanMethod"
                size="mini"
                style="width:100%"
              >
                <el-table-column
                  prop="name"
                  label="姓名"
                  align="center"
                  show-overflow-tooltip
                  width="200"
                ></el-table-column>
                <el-table-column
                  prop="subjectName"
                  label="学科"
                  align="center"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="subjectScore"
                  label="成绩"
                  align="center"
                  width="120"
                >
                </el-table-column>
              </el-table>

watch: {
    dataList (val) {
      this.getSpanArr(val)
    }
  },
  created () {
    this.getDataList()
  },
   // 获取数据
  getDataList () {
      this.dataList = [
        { id: '1', name: '张三', subjectName: '语文', subjectScore: 65 },
        { id: '1', name: '张三', subjectName: '数学', subjectScore: 71 },
        { id: '1', name: '张三', subjectName: '英语', subjectScore: 82 },
        { id: '2', name: '李四', subjectName: '语文', subjectScore: 60 },
        { id: '2', name: '李四', subjectName: '数学', subjectScore: 88 }
      ]
    },
      // 合并单元格
    getSpanArr (data) {
      this.spanArr = []
      if (data == null) {
        return
      }
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同  
          if (data[i].id === data[i - 1].id) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
    },
    // 合并单元格
    spanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < 1) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
0

评论 (0)

取消