表格固定行固定列问题

效果图

代码:

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;
			    }
            }
        }
}
相关推荐
十八朵郁金香35 分钟前
【JavaScript】深入理解模块化
开发语言·javascript·ecmascript
m0_7482309438 分钟前
Redis 通用命令
前端·redis·bootstrap
YaHuiLiang1 小时前
一切的根本都是前端“娱乐圈化”
前端·javascript·代码规范
菜鸟一枚在这2 小时前
深入解析设计模式之单例模式
开发语言·javascript·单例模式
ObjectX前端实验室2 小时前
个人网站开发记录-引流公众号 & 谷歌分析 & 谷歌广告 & GTM
前端·程序员·开源
CL_IN2 小时前
企业数据集成:实现高效调拨出库自动化
java·前端·自动化
浪九天4 小时前
Vue 不同大版本与 Node.js 版本匹配的详细参数
前端·vue.js·node.js
qianmoQ4 小时前
第五章:工程化实践 - 第三节 - Tailwind CSS 大型项目最佳实践
前端·css
C#Thread4 小时前
C#上位机--流程控制(IF语句)
开发语言·javascript·ecmascript
尚学教辅学习资料4 小时前
基于SpringBoot+vue+uniapp的智慧旅游小程序+LW示例参考
vue.js·spring boot·uni-app·旅游