zoukankan      html  css  js  c++  java
  • el-table合并单元格

    <el-table
    :data="buildingData"
    :span-method="buildingSpanMethod"
    border
    style=" 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);
    }
    }

    代码搬运工
  • 相关阅读:
    int和Integer有什么区别
    互联网思维的四个核心观点九大思维解读
    未来流行的12种商业模式
    小黑裙三级分销模式
    数据库设计三大范式
    数据库设计中常见表结构的设计技巧
    软件架构的演进,了解单体架构,垂直架构,SOA架构和微服务架构的变化历程
    查理芒格的25种人类误判心理学
    聪明的老板,都懂得让人占便宜(经典)
    真正聪明的人,从不占人便宜
  • 原文地址:https://www.cnblogs.com/tw6668/p/14301186.html
Copyright © 2011-2022 走看看