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
        };

      },
    }