vxe-table的pulldown组件滚动条无法拖动滚动

最新推荐文章于 2024-04-28 22:40:38 发布
最新推荐文章于 2024-04-28 22:40:38 发布
阅读量699 收藏 2
点赞数 2
文章标签： html 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/solooooooh/article/details/130881544
版权
博客指出滚动条不支持拖动，仅滚轮时生效的问题。解决办法是将下拉容器中嵌套的vxe - table的position属性从relative改为static，涉及前端开发相关内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

滚动条不支持拖动，只有在滚轮时生效。

解决方法：把下拉容器中嵌套的vxe-table的position：relative改为static即可


:deep(.vxe-table--render-default .vxe-table--body-wrapper) {
  position: static;
}

Vue2 - 解决 iView 表格组件 Table 滚动条无法拖动问题，表格固定列时滚动条失效导致拖拽没反应，把表格的某列固定后横向或纵向滚动条无法滚动的问题处理（有合计行或固定时导致失效无法拖曳）
王二红
07-14 3076
iview，vue，表格组件，table，滚动条，无法拖曳，拖动，无效，不生效，没反应，table固定列后,进度条无法拖拽iview固定列导致滚动条失效，也不报错，样式，无法覆盖，deep，iviewtable组件当固定高度后，fixed某一列会出现盖住滚动条的情况，滚动条始终位于可视区域的实现，详细解决方案，如何解决这个问题，样式覆盖依然报错，无法滚动，鼠标拖住不动，设置固定列，横向滚动条在固定列的位置上无法滚动的问题，vue2iview表格固定后滚动条无法拖动，解决iview带合计行表格固定列后滚动
bug管理level1_3【解决vxe-table中scrollTop = scrollHeight 无法实现滚动条到底部的问题】
qq_41436056的博客
10-14 1885
描述: 使用vxe-table基础表格实现新增需求时，滚动条应实现到达表格底部，但修改scrollTop = scrollHeight 时无法实现效果，打印scrollTop可以得到修改后的值，但是dir属性时可以看到真实的scrollTop并未发送改变，原因不明 出现原因: 使用原生js不能实现获取该元素并修改dom元素的scrollTop 技术栈: vue + vxe-table 解决方法: 参考vxe-table文档，对添加按钮使用工具栏toolbar来对vxe-table进行控制，直接通过按钮来控
解决iview表格固定列横向滚动条无法拖动问题
weixin_44799030的博客
03-14 1169
【写入main.js引入的全局文件时不需要::v-deep;写入单个文件需要加::v-deep】iview的table添加固定列以后，滚动条在固定列下面无法拖动，只能在滚动区域有所反应。
element table for循环出来设置fixed，table底部滚动条无法拖动
A7536的博客
01-16 632
element table for循环出来设置fixed，table底部滚动条无法拖动
日常开发记录-el-table 固定列下横向滚动条无法拖动的问题解决方案
machine_vision123的博客
08-25 1478
原因：层级问题，左侧固定列层级高，滚动条层级低，提升一下滚动条层级即可 注意要在全局样式中定义类 fixed-scrool-error样式 .fixed-scroll-error { .el-table--scrollable-x .el-table__body-wrapper { z-index: 2; } } 运用：直接在有问题的表格最外层 标签中使用 fixed-s...
Vxe-Table 拖拽排序失效
悟●禅●酒的专栏
01-19 2392
亲测，如果严格按照官方示例，拖拽功能是好使的 今天在调界面时，发现有个界面的拖拽排序功能，因为数据过多，出了滚动条后，拖拽拿到的newIndex数值不对，调试了半天，才找到原因。 官方例子 而此处的newIndex数值不对，主要原因是 XXX 将没看懂的属性 :scroll-y="{enabled: false}"删除掉了，导致有滚动条时，拖拽行的 newIndex 重新计算了导致的。 ...
vxe-table vue表格解决方案 v3.7.9.zip
04-02
《vxe-table vue表格解决方案 v3.7.9》是一个专为Vue.js开发的高性能、易用的表格组件库，其版本号为3.7.9。作为一个强大的前端UI组件，vxe-table提供了丰富的功能，旨在帮助开发者在构建数据驱动的Web应用时，能够...
vxe-table vue表格解决方案 v4.5.20.zip
03-27
vxe-table是一款开源的Vue表格组件，它提供了丰富的表格功能，包括但不限于数据排序、筛选、分页、合并单元格、拖拽列宽、行列固定、自定义操作等。这个组件不仅易于集成到现有的Vue项目中，而且在性能优化方面也做...
vxe-table-v2.9.24_表格组件_Table_
09-28
**vxe-table-v2.9.24：Vue.js中的高效表格组件** vxe-table是一款在Vue.js框架下设计的高性能表格组件，它的版本号为2.9.24，旨在提供一系列强大的功能来满足复杂的数据展示和操作需求。这款组件以易用性和灵活性为...
vxe-table vue table 表格组件功能
10-16
vxe-table是Vue.js中一款功能强大的表格组件，它为用户提供了丰富的表格操作功能，可以大大提高开发中的表格处理效率。vxe-table组件支持多种特性，包括但不限于基础展示、尺寸调整、样式定制、交互功能和数据处理等...
基于 vxe-table 表格的适配插件，用于兼容 ant-design-vue 组件库
05-28
npm install vxe-table@next vxe-table-plugin-antd@next ant-design-vue@next // ... import VXETable from 'vxe-table' import VXETablePluginAntd from 'vxe-table-plugin-antd' import 'vxe-table-plugin-antd/...
vxe-table固定列遮挡滚动条
x_iao_s的博客
02-09 1401
scss穿透进去把浮动的高度减少一点把滚动条露出来就可以了具体自己个控制、我来提供一个思路.vxe版本3.6.9。
Node-express项目--个人简历：login(登录)接口编写记录
2401_84437604的博客
04-28 748
/ 判断用户是否存在if (!user) {return res.status(400).json({ eamil: “用户不存在” })} else {// 判断密码是否正确res.status(200).json({ msg: “登录成功” })} else {return res.status(400).json({ password: “密码错误” })});})})测试：创建验证：在validation文件夹下新建login.js文件，用于验证登录。
vxe-table vxe-select 在表格内滚动无法置顶
NI_chunz的博客
12-13 678
vxe-table表格内无法下拉框的值
ElementUI 表格固定列横向滚动条无法拖动问题
Xuhai0811的博客
07-26 392
z-index: 2;
vue elment-ui table组件滚动条位置 和vxe-table 的table组件滚动条位置
IT博客技术分享
11-25 7841
1. 先说elment-ui table组件滚动条位置 element ui table 添加数据行后滚动条滚动到对应的行头或行尾问题 滚动到第一行： this.$refs.table.bodyWrapper.scrollTop =0; 滚动到最后一行： this.$refs.table.bodyWrapper.scrollTop =this.$refs.table.bodyWrapper.scrollHeight; 改成： this.$nextTick(() => { let scr
[vxe-table] 合并行后滚动错位
qq_14993591的博客
10-12 1505
使用vxe-table的属性:span-method合并行，之后下拉后会错位。
vxe-table 获取滚动高度、还原滚动条位置、展开树形表格
是秃子总会发光
02-20 4618
1
vxe-table 如何关闭虚拟滚动、设置虚拟滚动触发规则
我的博客
09-12 9436
vxe-table 如何关闭虚拟滚动、设置虚拟滚动触发规则 vxe-table 支持高性能的虚拟渲染，但是有些功能是不支持虚拟渲染的，比如展开行、自适应高度…等 虚拟滚动的参数是由以下控制的： scroll-x 用于控制横向虚拟滚动，gt 当大于指定条数时自动启用，默认 60，如果为 -1 则关闭虚拟滚动 scroll-y 用于控制纵向虚拟滚动，gt 当大于指定条数时自动启用，默认 100，如果为 -1 则关闭虚拟滚动 全局设置 VXETable.setup({ table: { scrollX
vxe-table横向滚动条隐藏
最新发布
03-12
### 如何在 vxe-table 中隐藏横向滚动条 为了实现在 `vxe-table` 组件中隐藏横向滚动条的效果，可以通过自定义 CSS 样式来达到目的。具体来说，在全局或者局部样式表中针对 `.vxe-body--x-scroll .vxe-scrollbar__bar--horizontal` 类名应用特定的样式规则。 ```css /* 隐藏 vxe-table 横向滚动条 */ .vxe-body--x-scroll .vxe-scrollbar__bar--horizontal { display: none; } ``` 需要注意的是，上述方法会简单粗暴地移除所有地方出现的横向滚动条，如果仅希望影响某一张具体的表格，则应该考虑更精确的选择器路径或是在目标表格外层包裹一层具有唯一类名的容器，并以此作为前缀限定作用范围[^1]。 另外一种方式是调整表格列宽使得其适应容器宽度从而避免产生多余的水平空间，进而自然消除横滚条的存在必要性。这通常涉及到合理配置每列的固定宽度(`width`)或是允许自动分配剩余可用空间(`flex: 1`)等属性设置[^2]。 对于某些特殊场景下仍需保留一定量的内容溢出但又不想展示滚动条的情况，还可以尝试利用伪元素覆盖掉实际存在的滚动轨道区域而不干扰用户体验[^3]。 #### 示例代码 以下是通过 Vue 单文件组件形式给出的一个例子： ```html <template> <div class="custom-table-wrapper"> <!-- 表格 --> <vxe-table :data="tableData"></vxe-table> </div> </template> <style scoped lang="scss"> .custom-table-wrapper /deep/ .vxe-body--x-scroll .vxe-scrollbar__bar--horizontal { /* 完全隐藏 */ visibility: hidden !important; } // 或者采用另一种策略使内容适配屏幕而不需要滚动条 /deep/.vxe-cell--content { white-space: nowrap; // 不换行 overflow: hidden; // 超出部分不可见 text-overflow: ellipsis; // 文字超出显示省略号... } </style> ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值