el-table合并单元行

最新推荐文章于 2024-06-12 13:03:03 发布

我是胡帅

最新推荐文章于 2024-06-12 13:03:03 发布

阅读量96

点赞数

分类专栏： vue elment 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_55921724/article/details/127015031

版权

vue elment 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<el-table
  size="small"
  :data="mt_data"
  stripe :fit="true"
  border style="width: 100%;text-align: center;  position: absolute !important;
    overflow: auto !important; bottom: 60px; top: 110px;"
  :span-method="arraySpanMethod"
  element-loading-text="拼命加载中">

<el-table-column align="center"  prop="PROJECT_NAME" sortable label="名字"> </el-table-column>

<el-table>

export default {

  data() {
    return { 
    needMergeArr:['PROJECT_NAME'],
     rowMergeArr:{},
    }

methods: {
getApiData(){
     getData().then(res=>{
    let datas=res.data
      this.rowMergeArr = this.rowMegeHandle(this.needMergeArr,datas)
       })
     }

arraySpanMethod({row,column,rowIndex,columnIndex}){
  if(column.property ==='PROJECT_NAME'){
    return this.mergeAction('PROJECT_NAME',rowIndex, column)
  }
},
mergeAction(val,rowIndex,colData){
  let _row = this.rowMergeArr[val].rowArr[rowIndex]
  let _col = _row>0?1:0
  return[_row,_col]
},
rowMegeHandle(arr,data){
  if(!Array.isArray(arr)&&!arr.length) return false;
  if(!Array.isArray(data)&&!data.length) return false;
  let needMerge = {};
  arr.forEach(i =>{
    needMerge[i] = {
      rowArr:[],
      rowMergeNUm:0
    };
    data.forEach((item,index) =>{
      if(index === 0 ){
        needMerge[i].rowArr.push(1);
        needMerge[i].rowMergeNum = 0;
      }else{
        if(item[i]===data[index-1][i]){
          needMerge[i].rowArr[needMerge[i].rowMergeNUm] += 1
          needMerge[i].rowArr.push(0)
        }else{
          needMerge[i].rowArr.push(1)
          needMerge[i].rowMergeNUm = index
        }
      }
    })
  })
  return needMerge
}
}
}