iview表格固定原理

在这里插入图片描述
本来以为这种表格固定就是靠css就可以了,但发现主流的一些组件库显然不是这么搞的,还是拿js操控的。
cloneNode是原生js,默认克隆父节点,如果传了true会连子节点一起拷贝。
以固定头部为例,表格固定原理是,拷贝出一个空的table父节点,再把要固定的节点取出来,appendChild进这个table节点,再用绝对定位放到头部即可。

mounted() {
    if (this.height) { // 固定表头必须有height属性
      this.table = this.$refs.table;
      this.taleWrapper = this.$refs.tableWrapper;
      let copyTable = this.table.cloneNode(); // 拷贝表格
      let thead = this.table.children[0];

      this.taleWrapper.style.paddingTop = thead.getBoundingClientRect().height + 'px';
      copyTable.appendChild(thead); // 将原表格的thead 移动到拷贝的表格中
      this.taleWrapper.appendChild(copyTable); // 将拷贝后的结果插入到页面上

      copyTable.classList.add('fiex-header')
    }
  },
.fiex-header{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
}
.table-wrapper {
  width: 80%;
  margin: 0 auto;
  position: relative
 }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值