标签：el temp 单元格 buildingData columnIndex table getSpanArr data row

<el-table
  :data="buildingData"
  :span-method="buildingSpanMethod"
  border
  style="width: 100%"
>
  <el-table-column prop="stageName" label="分期"> </el-table-column>
  <el-table-column prop="alias" label="分期别名"> </el-table-column>
  <el-table-column prop="prostage" label="分期阶段"> </el-table-column>
  <el-table-column prop="higherBusinessType" label="一级业态">
  </el-table-column>
  <el-table-column prop="businessType" label="二级业态">
  </el-table-column>
  <el-table-column prop="buildings" label="楼栋"> </el-table-column>
  <el-table-column prop="jzzdmj" label="建筑占地面积"> </el-table-column>
  <el-table-column prop="zjrmj" label="计容面积"> </el-table-column>
  <el-table-column prop="zksmj" label="可售面积"> </el-table-column>
  <el-table-column prop="zjzmj" label="总建筑面积"> </el-table-column>
</el-table>

data() {
  return {
    spanStageArr:[],
    stagePos:'',
    spanBuildingArr:[],
    buildingPos:''
  };
},

props: {
  buildingData: {
    type: Array
  },
  stageData: {
    type: Array
  }
},

methods: {
  getSpanArr(data,temp,pos) {
    // data就是我们从后台拿到的数据
    for (var i = 0; i < data.length; i++) {
      if (i === 0) {
        temp.push(1);
        pos = 0;
      } else {
        // 判断当前元素与上一个元素是否相同
        if (data[i].stageName === data[i - 1].stageName) {
          temp[pos] += 1;
          temp.push(0);
        } else {
          temp.push(1);
          pos = i;
        }
      }
      console.log(temp);
    }
  },
  stageSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (columnIndex != 3 && columnIndex != 4) {
      const _row = this.spanStageArr[rowIndex];
      const _col = _row > 0 ? 1 : 0;
      return {
        // [0,0] 表示这一行不显示， [2,1]表示行的合并数
        rowspan: _row,
        colspan: _col
      };
    }
  },
  buildingSpanMethod ({ row, column, rowIndex, columnIndex }) {
    if (columnIndex != 3 && columnIndex != 4) {
      const _row = this.spanBuildingArr[rowIndex];
      const _col = _row > 0 ? 1 : 0;
      return {
        // [0,0] 表示这一行不显示， [2,1]表示行的合并数
        rowspan: _row,
        colspan: _col
      };
    }
  }
},

mounted() {
  this.getSpanArr(this.stageData,this.spanStageArr,this.stagePos);
  this.getSpanArr(this.buildingData,this.spanBuildingArr,this.buildingPos);
},
watch:{
  'buildingData': function() {
    this.spanBuildingArr = [];
    this.buildingPos = ''
    this.getSpanArr(this.buildingData,this.spanBuildingArr,this.buildingPos);
  },
  stageData: function() {
    this.spanStageArr = [];
    this.stagePos = '';
    this.getSpanArr(this.stageData,this.spanStageArr,this.stagePos);
  }
}

标签：el,temp,单元格,buildingData,columnIndex,table,getSpanArr,data,row
来源： https://www.cnblogs.com/tw6668/p/14301186.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。