解决iview带合计行表格固定列后滚动条无法拖拽的问题

4 篇文章 0 订阅
在处理iview表格组件的固定窗格滚动条问题时,可以通过设置CSS属性`pointer-events:none`来解决无法拖动的问题,但这会影响到固定列的交互功能,如复选框点击和拖拽列表。为恢复这些功能,需要对`.ivu-table-fixed-header`和`.ivu-table-fixed-body`添加`pointer-events:all`样式。
摘要由CSDN通过智能技术生成

问题描述

在使用iview的表格组件时,遇到了设置了固定窗格后滚动条无法拖动的问题,网上有设置固定区域height和bottom的方法,但是发现并不适用于带合计行的表格,于是找到了如下解决方法。

解决方法

.ivu-table-fixed {
	pointer-events: none;
}

在全局样式中添加如上代码可以解决滚动条无法拖动的问题,但是会导致固定列区域的复选框无法点击,拖拽列表无法拖动等问题,所以还需要加上如下代码

.ivu-table-fixed-header{
	pointer-events: all;
}
.ivu-table-fixed-body {
	pointer-events: all;
}
  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 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
发出的红包

打赏作者

Komorebi゛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值