zoukankan      html  css  js  c++  java
  • vue3.0 element-plus 表格合并行

    合并效果

    代码:

    //el-table  上面加上  :span-method="cellMerge"
    
    let tableData = ref(null)
    watch(props, (newValue, oldValue) => {
        tableData.value = props.tableDatas
        getSpanArr(tableData.value)
    })
    
    function cellMerge({ row, column, rowIndex, columnIndex }) {
        // 合并第二列,第一列是序号
        if(columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 10 || columnIndex === 11 || columnIndex === 12 || columnIndex === 13 || columnIndex === 14 || columnIndex === 15 || columnIndex === 16 || columnIndex === 17 || columnIndex === 18 || columnIndex === 19 || columnIndex === 20){
            if(row.fwtjgdh && row.fwtjgdh!==" " && row.fwtjgdh!=="—"){
                const _row = spanArr.value[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col,
                };
            }
        }
    }
    
    
    let spanArr = ref(null)
    let pos 
    function getSpanArr(data){
        spanArr.value = [];
        data.map((item, i) => {
            if (i === 0) {
                spanArr.value.push(1);
                pos = 0;
            }else{
                // 判断当前元素与上一个元素是否相同
                if (item.fwtjgdh=== data[i - 1].fwtjgdh) {
                    spanArr.value[pos] += 1;
                    spanArr.value.push(0);
                } else {
                    spanArr.value.push(1);
                    pos = i;
                }
            }
        });
        // console.log(spanArr.value)
    }
  • 相关阅读:
    redis-client和redis-template存储的key的格式不一样
    dubbo+zookeeper基础
    java面试题1
    Spring线程池(异步、同步)
    Java并发多线程
    Java并发-并发工具类JUC
    Java并发面试题
    ActiveMQ
    一键部署springboot到Docker
    Quartz任务调度学习
  • 原文地址:https://www.cnblogs.com/chengxiang123/p/14764712.html
Copyright © 2011-2022 走看看