el-table实现固定列,及解决固定列导致部分滚动条无法拖动的问题

一、el-table实现固定列

当数据量动态变化时,可以为 Table 设置一个最大高度。

通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度,则会显示一个滚动条。

html 复制代码
<div class="zn-filter-table">
    <!-- 表格-->
    <el-table class="table-box" ref="table" :data="tableData" style="width: 100%;" max-height="580" border stripe @selection-change="handleSelectionChange"
      :header-cell-style="{'text-align':'center',}">
        <el-table-column type="selection" width="55" align="center" v-if="multiple"></el-        table-column>
         <el-table-column>
            XXXX
        </el-table-column>
        <el-table-column label="操作" align="center" width="150" class="table-fixed-right" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleSelect(scope.row)">详情</el-button>
          <!-- <el-button size="mini" type="text" @click="handleDelete(scope.row)" class="mpc_del">删除</el-button> -->
          <el-dropdown size="small" type="primary" trigger="hover" style="margin-left: 10px;">
            <span style="color: #1890FF;font-size: 12px;">更多</span>
            <el-dropdown-menu slot="dropdown">
              <div v-for="item in buttons" :key="item.value">
                <el-dropdown-item v-if="item.value === 'del'" @click.native="handleDelete(scope.row)" class="mpc_del" v-hasPermi="item.hasPermi">{{item.label}}</el-dropdown-item>
                <el-dropdown-item v-else @click.native="handleUpdate(scope.row,item.value)" style="font-size: 12px;color: #1890FF;" v-hasPermi="item.hasPermi">{{item.label}}</el-dropdown-item>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </table>

fixed属性:列是否固定在左侧或者右侧,true 表示固定在左侧;可选值:true, left, right

二、同用样式配置

框架之间引用过来的组件会和elementUi中的组件存在差异,因此需要一些通用样式,样式修改如下:

css 复制代码
<style>
  .zn-filter-table {
    /* border: 1px solid blue; */
  }

  .zn-filter-table .el-table-column--selection .cell {
    padding-right: 10px !important;
  }

  .zn-filter-table .el-table__fixed-body-wrapper .el-table__body {
    /* 这个得自己调试看多少合适 */
    padding-bottom: 20px;
  }

  /* 固定列高度与表格高度不一致 */

  .zn-filter-table .el-table__fixed,
  .zn-filter-table .el-table__fixed-right {
    height: calc(100% - 33px) !important;
    /* height: 100% !important; */
    right: 0 !important;
    /* 这个得自己调试看多少合适 */
    bottom: 20px !important;
  }

  .zn-filter-table .el-table__fixed::before,
  .zn-filter-table .el-table__fixed-right::before {
    background: transparent !important;
    /* 去掉固定列下方的横线, 样式优化 */
    display: none;
  }


  .table-fixed-right {}
</style>

三、解决 el-table 固定列 el-table__fixed 导致部分滚动条无法拖动的问题

当给 el-table 表格的列添加了 fixed 属性之后,我们可以发现,被固定的部分虽然鼠标悬浮时会显示滚动条,但却无法拖动,通过修改表格固定列的高度,使固定列无法遮住滚动条,即可实现无障碍拖动。

四、滚动条样式设置

html 复制代码
<style scoped>
  
  /* // 滚动条样式 */
/* // 胶囊背景色 */
::v-deep .el-table__body-wrapper::-webkit-srollbar-track {
    background-color: rgba(255, 255, 255, 0);
}
/* //可设置胶囊宽高 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    height: 12px;
    opacity: 0.5;
}
/* 设置胶囊色 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: #cdd9e6;
}
</style>

五、动态修改el-table表格滚动条,控制表格高度

1.在el-table中添加动态高度

:max-height="tableHeight"

2.定义动态高度变量

3.写动态高度方法

html 复制代码
created() {
      this.tableHeight = window.innerHeight - 346
    },

4.监听窗口发生变化时表格高度动态变化

html 复制代码
mounted() {
      this.handleTableHeight();
    },
    methods: {
      handleTableHeight: function () {
        var _this = this;
        window.onresize = () => {
          _this.tableHeight = window.innerHeight - 346
        };

      },
    }
相关推荐
yiyesushu1 分钟前
react + next.js + ethers v6 项目实例
前端
明远湖之鱼2 分钟前
巧用 Puppeteer + Cheerio:批量生成高质量 Emoji 图片
前端·爬虫·node.js
落笔忆梦4 分钟前
利用浏览器空闲时间优化资源加载与渲染
前端·javascript
我是日安4 分钟前
Day 2 - 开发环境建置:monorepo
vue.js
艾小码5 分钟前
还在用Vue 2硬撑?升级Vue 3的避坑指南来了!
前端·javascript·vue.js
是晓晓吖5 分钟前
page.waitForResponse 执行环境:页面还是 Node.js?
前端·puppeteer
三十_7 分钟前
【Docker】学习 Docker 的过程中,我是这样把镜像越做越小的
前端·后端·docker
Mintopia7 分钟前
🌐 交互式 AIGC:Web 端实时反馈生成的技术架构设计
前端·javascript·aigc
蓝天星空9 分钟前
ES6-Promise用法
前端·javascript·es6
诗书画唱12 分钟前
解决HTML/JS开发中的常见问题与实用资源
前端·javascript·html