el-table自定义合并行或列

el-table自定义合并行或列_第1张图片

ElementUI:通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表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="数值 1(元)">
      </el-table-column>
      <el-table-column
        prop="amount2"
        label="数值 2(元)">
      </el-table-column>
      <el-table-column
        prop="amount3"
        label="数值 3(元)">
      </el-table-column>
    </el-table>

js 部分

data() {
  return {
	spanArr: [],
	pos: 0
  }
},
watch: {
  tableData: {
    handler () {
      this.getSpanArr(this.tableData)
    },
    immediate: true
  }
},
methods: {
	// 根据条件合并随意行数,因为合并的行数可能是不固定的(传入的data参数为从后台数据数据)
    getSpanArr(data) {
      this.spanArr = []
      this.pos = 0
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          // 如果是第一条记录(即索引是0的时候),向数组中加入1
          this.spanArr.push(1)
          this.pos = 0
        } else {
          if (data[i].date === data[i - 1].date) {
            // 如果date相等就累加,并且push 0 (这里的判断视自己的判定依据改变)
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            // 不相等push 1
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 用于设置要合并的列 0 表示第一列
      if (columnIndex === 0) {
        const cRow = this.spanArr[rowIndex]
        const cCol = cRow > 0 ? 1 : 0
        return {
          rowspan: cRow, // 合并的行数
          colspan: cCol // 合并的列数,为0表示不显示
        }
      }
    }
}

你可能感兴趣的:(vue,el-table)