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);
    }
    }

    代码搬运工
  • 相关阅读:
    centos6升级python
    MySQL的BLOB类型(解决mysql不支持mb4编码的时候存储emoji表情问题)
    librdkafka安装和php扩展php-rdkafka安装
    Mac High Sierra 降级安装Mac Sierra
    mysql常用命令
    PHP_CodeSniffer 安装和phpstorm配置
    SSH登录异常(someone is doing something nasty)
    java并发 —— Lock
    java 并发——线程
    java 并发——内置锁
  • 原文地址:https://www.cnblogs.com/tw6668/p/14301186.html
Copyright © 2011-2022 走看看