表格固定行固定列问题

效果图

代码:

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

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iView表格组件是一种基于Vue.js的适用于管理和展示数据的强大工具。它提供了一种嵌套表格的功能,使得我们可以在表格的某一中再次引入一个子表格,并且可以固定某些使其在水平滚动时保持固定位置。 要实现表格嵌套表格固定,我们需要使用iView提供的`fixed`属性。首先,我们可以通过在主表格定义中设置`fixed`属性为left或right来固定。这将使得指定的固定表格的左侧或右侧位置。 然后,在主表格的某一中,我们可以使用嵌套表格的方式来创建一个子表格。通过在该的slot中使用`<template>`标签,并添加相应的标识,我们可以在该slot中引入子表格。 对于子表格,我们也可以设置任意多个,并通过设置`fixed`属性来决定哪些需要固定。这样,当主表格水平滚动时,固定将始终保持在其指定的位置上。 需要注意的是,表格的父子之间的关系是通过唯一的`expand`字段来确定的。通过在主表格定义中加入一个`type=expand`的,我们可以在展开子表格时将数据传递给子表格。然后,子表格将根据传递的数据显示相应的内容。 总之,通过合理地使用iView表格组件提供的`fixed`属性,我们可以实现表格嵌套表格固定的功能。这种功能在需要同时展示父子表格数据并保持固定位置时非常有用。同时,iView的文档和示例也会提供更详细的使用方法和示例代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值