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)
    }
  • 相关阅读:
    方法的参数传递机制
    策略模式
    Factory(简单的工厂模式)
    java 跨域问题解决
    Map 转成Json字符串
    FastDFS 上传,删除文件
    MD5 密码加盐
    Java-图片压缩
    调用支付宝人脸采集查询图片Base64解码
    HttpClient工具类
  • 原文地址:https://www.cnblogs.com/chengxiang123/p/14764712.html
Copyright © 2011-2022 走看看