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

一、el-table实现固定列

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

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

<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中的组件存在差异，因此需要一些通用样式，样式修改如下：

<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 属性之后，我们可以发现，被固定的部分虽然鼠标悬浮时会显示滚动条，但却无法拖动，通过修改表格固定列的高度，使固定列无法遮住滚动条，即可实现无障碍拖动。

 

 四、滚动条样式设置

<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.写动态高度方法

created() {this.tableHeight = window.innerHeight - 346},

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

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