vue2 element表格指定列相同数据合并单元格

最新推荐文章于 2024-08-13 23:10:15 发布

烈火熊熊

最新推荐文章于 2024-08-13 23:10:15 发布

阅读量339

点赞数 4

文章标签： elementui vue.js html5 css javascript

本文链接：https://blog.csdn.net/m0_58234730/article/details/140500282

版权

先看效果图

<template>
  <div id="app">
    <el-table
      :data="tableData"
      :span-method="(param)=>objectSpanMethod(param)"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column
        prop="id"
        label="ID"
        align="center"
      />
      <el-table-column
        prop="type_test"
        label="类型"
        align="center"
      />
      <!-- <el-table-column
        prop="id"
        label="ID"
        align="center"
      /> -->
      <el-table-column
        prop="result_status"
        label="结果"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.result_status | ResultFilter">
            {{ scope.row.result_status | ResultFilterStr }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>

export default {
  filters: {
    ResultFilter(status) {
      const ongSteadyMap = {
        SUCCESS: 'success',
        FAILURE: 'danger',
        NA: 'primary',
        ABORTED: 'info',
        FAIL: 'danger',
        None: 'warning'
      }
      return ongSteadyMap[status]
    },
    ResultFilterStr(status) {
      const ongSteadyMap = {
        SUCCESS: '审核通过',
        FAILURE: '上级审核中',
        ABORTED: '待确认',
        None: '审核不通过'
      }
      return ongSteadyMap[status]
    }
  },
  data() {
    return {
      tableData: [
        {
          'id': 1,
          'type_test': '单位1',
          'result_status': 'SUCCESS'
        },
        {
          'id': 2,
          'type_test': '单位1',
          'result_status': 'SUCCESS'
        },
        {
          'id': 3,
          'type_test': '单位1',
          'result_status': 'SUCCESS'
        },
        {
          'id': 4,
          'type_test': '单位1',
          'result_status': 'FAILURE'
        },
        {
          'id': 5,
          'type_test': '单位1',
          'result_status': 'None'
        },
        {
          'id': 6,
          'type_test': '单位2',
          'result_status': 'SUCCESS'
        },
        {
          'id': 7,
          'type_test': '单位1',
          'result_status': 'FAILURE'
        },
        {
          'id': 8,
          'type_test': '单位1',
          'result_status': 'None'
        }
      ]
    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log('objectSpanMethod', row, column, rowIndex, columnIndex)
      if (columnIndex === 1) { // 要合并列的下标 从0开始 如果合并第3列 写columnIndex===2
        const _row = this.flitterData(this.tableData).one[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
		    }
    },
    flitterData(arr) {
      // 合并表格第一列
      const spanOneArr = []
      let concatOne = 0
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1)
        } else {
          console.log('item', item, index)
          console.log('arr', arr[index - 1])
          // 这里的type_test是表格绑定的字段，也就是需要合并的字段，根据自己的需求来改
          if (item.type_test == arr[index - 1].type_test) {
            // 第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1
            spanOneArr.push(0)
          } else {
            spanOneArr.push(1)
            concatOne = index
          }
        }
      })
      return {
        one: spanOneArr
      }
    }

  }
}
</script>