element table 根据属性值合并行

最新推荐文章于 2024-08-12 16:36:59 发布

Ya_Taylor

最新推荐文章于 2024-08-12 16:36:59 发布

阅读量134

点赞数

分类专栏： vue+element 文章标签： vue

本文链接：https://blog.csdn.net/Ya_Taylor/article/details/116747837

版权

vue+element 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

element table 根据属性值合并行

要先自行将列表按属性值相同的进行排序

<template>
  <el-table
          :data="tableList"
          style="width: 100%"
          stripe
          :header-cell-style="{ background: '#0940A4', color: '#ffffff' }"
          :span-method="ObjectSpanMethod"
        >
          <el-table-column
            align="center"
            label="名称"
            prop="name"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            label="编号"
            prop="id"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
  </template>

 export default {
  computed: {},
  data() {
    return {
    // 列表数据
      tableList: [ ],
      // 合并的长度
      colSpanArr: [],
      // 合并开始的位置
      rowIndexArr: []
    };
  },
  mounted() {
    getData()
  },
  methods: {
  getData(){
	  realpageList({
	        currentPage: this.searchKey.currentPage,
	        pageSize: this.searchKey.pageSize
	      })
	        .then(res => {
	          if (res.code == 200) {
	            var siteIdlist = [],
	              reslist = []
	            var _data = res.data
	            // 重新排序 将id相同的相邻排
	            _data.map(el => {
	              siteIdlist.push(el.id)
	            })
	            var setlist = [...new Set(siteIdlist)]
	            for (var i in setlist) {
	              for (var j in _data) {
	                if (_data[j].id== setlist[i]) {
	                  reslist.push(_data[j])
	                }
	              }
	            }
	            this.tableList = reslist || []
	            this.searchKey.total = parseInt(res.count) || 0
	            this.getColSpanData('id', this.tableList)
	          } else {
	            this.$notify({
	              type: 'error',
	              title: '查询失败，请重新查询',
	              message: res.msg,
	              position: 'bottom-right'
	            })
	          }
	        })
	        .finally(() => {
	          this.$store.commit('toggleLoading', false)
	   })
  },
   //  获取合并行的位置和合并长度
    getColSpanData(prop, data) {
      this.rowIndexArr = []
      this.colSpanArr = []
      let colLength = 1
      data.forEach((element, index) => {
        if (index == 0) {
          // rowIndex开始合并的位置为0,合并单元格数量默认为1
          this.rowIndexArr.push(0)
          colLength = 1
        } else {
          if (element[prop] == data[index - 1][prop]) {
            // 当相邻两条数据相等时，rowspan+1,即colLength+1
            colLength += 1
            // 当最后一条数据与倒数第2条不等式，在colSpanArr中push(1)
            if (index == data.length - 1) {
              this.colSpanArr.push(colLength)
            }
          } else {
            //  相邻两条不等时push index和合并的长度
            this.colSpanArr.push(colLength)
            this.rowIndexArr.push(index)
            if (index == data.length - 1) {
              this.colSpanArr.push(1)
            }
            colLength = 1
          }
        }
      })
      this.rowIndexArr.push(data.length)
    },
    ObjectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        for (let i = 0; i < this.colSpanArr.length; i++) {
          //如果rowIndex和this.rowIndexArr[i]相等则开始合并，合并数量对应为this.colSpanArr[i]
          if (rowIndex === this.rowIndexArr[i]) {
            return {
              rowspan: this.colSpanArr[i],
              colspan: 1
            }
          } else {
            if (rowIndex > this.rowIndexArr[i] && rowIndex < this.rowIndexArr[i + 1]) {
              return {
                rowspan: 0,
                colspan: 0
              }
            }
          }
        }
      }
    },
};