解决iview表格固定列横向滚动条无法拖动问题

胆小鬼゛

于 2024-03-14 15:10:35 发布

阅读量1.1k

点赞数 15

文章标签： view design vue.js 前端 elementui

本文链接：https://blog.youkuaiyun.com/weixin_44799030/article/details/136711283

版权

本文介绍了在iviewtable中添加固定列后滚动条无法拖动的问题，并提供了两种解决方案：一是全局修改pointer-events样式，二是针对每个td元素单独设置pointer-events。这两种方法适用于包括合计行在内的场景。

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

问题描述：
iview的table添加固定列以后，滚动条在固定列下面无法拖动，只能在滚动区域有所反应
在这里插入图片描述
解决办法
【写入main.js引入的全局文件时不需要::v-deep; 写入单个文件需要加::v-deep】

方法一：【带合计行也适用】

//解决iview表格固定列横向滚动条无法拖动问题
.ivu-table-fixed {
  pointer-events: none;
}

.ivu-table-fixed-header {
  pointer-events: all;
}

.ivu-table-fixed-body {
  pointer-events: all;
}

方法二

.ivu-table-fixed{
    pointer-events: none;
    td{
        pointer-events: auto;
    }
}
.ivu-table-fixed-right{
    pointer-events: none;
    td{
        pointer-events: auto;
    }
}
.ivu-table-fixed-header{
    pointer-events: none;
    td{
        pointer-events: auto;
    }
}
.ivu-table-fixed-body{
    pointer-events: none;
    td{
        pointer-events: auto;
    }
}