表格固定行固定列问题

效果图

代码:

1.第一部分:表格固定行:用合计行来实现

<el-table
     class="fixedRowcol"
    :data="tableData"
    border
    show-summary
    sum-text="合计"
    ref="table"></el-table>

2.第二部分:表格固定列加按钮,watch实现

watch: {
        tableData() {
            let _this = this;
            this.$nextTick(() => {
	            console.log(_this.$refs.table.$refs);
           	    let html = _this.$refs.table.$refs.rightFixedFooterWrapper
	            .querySelector(".el-table__footer")
	            .querySelectorAll("td")[6]
	            .querySelector(".cell");
	
	             html.innerHTML = "<el-button>查看</el-button>";
	             html.onclick = () => {}
            });
        },
},

3.第三部分:style样式修改(根据element-ui table的各个部分实现方式,层级结构)

:deep(.el-table.fixedRowcol) {
	    display: flex;
   	    flex-direction: column;
   	    .el-table__body-wrapper{
		    order: 1;
		    height: calc(100% - 76px) !important;
	    }
    	.el-table__footer-wrapper{
		    min-height: 32px;
		    display: flex !important;
      		td.el-table__cell{
			    div{
          		    white-space: nowrap;
			    }
      		}
    	}
	    .el-table__fixed-body-wrapper {
		    top: 76px !important;
		    height: calc(100% - 76px) !important;
   	    }
	    .el-table__fixed-footer-wrapper {
		    display: block !important;
		    z-index: 4;
		    top: 42px !important;
		    td.el-table__cell{
			    div{
            	    white-space: nowrap;
			    }
            }
        }
}

相关推荐

  1. HTML固定表格宽度

    2024-03-25 22:24:02       32 阅读
  2. css 固定表头

    2024-03-25 22:24:02       13 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-25 22:24:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-25 22:24:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-25 22:24:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-25 22:24:02       20 阅读

热门阅读

  1. AI大模型学习: 理论基础、训练优化与应用前景

    2024-03-25 22:24:02       16 阅读
  2. 7. 模型测试 - Simulink Test 功能测试

    2024-03-25 22:24:02       18 阅读
  3. QTimer

    2024-03-25 22:24:02       15 阅读
  4. LeetCode 第390场周赛个人题解

    2024-03-25 22:24:02       17 阅读
  5. VMware Workstation常见问题

    2024-03-25 22:24:02       18 阅读
  6. 教程1_图像入门

    2024-03-25 22:24:02       16 阅读
  7. 模型权重下载方法

    2024-03-25 22:24:02       19 阅读
  8. 全球化浪潮下的网络技术与安全策略

    2024-03-25 22:24:02       17 阅读