el-table设置列属性fixed导致滚动条无法拖动-骨灰级

一、前言说明

网上一搜索，千篇一律的设置el-table__fixed，如：

.el-table__fixed { // 左固定列
    height: auto !important;
    bottom: 18px; 
}
.el-table__fixed-right { // 右固定列
    height: auto !important;
    bottom: 18px; 
}

此方法存在较多问题：

　　1.导致表格错位，还要去调整错位问题，也会导致更多浏览器兼容错位问题

　　2.bottom的固定高度只能满足单一浏览器分辨率，不同电脑不同浏览器，分辨率不同，会出现多一些少一些等情况。

二、有效方案

通过首次进入，加载数据完成后重新渲染一次表格即可解决问题，以下是解决方案的相关代码

<!-- 1.表格上增加ref属性 -->
<el-table ref="tableRef" ……>
    ……
</el-table>

<script>
export default {
    data() {
        return {
          // 2. 定义变量，是否需要表格重新渲染
          needDoLayout: true, 
        }
    }
    created() {
        this.queryData();
    },
    methods: {     
        queryData() {  
            // 查询数据代码 省略
            // 3.第一次查询数据时，将表格重新渲染即可
            if(this.needDoLayout){
               this.$nextTick(() => {
            　　　　this.$refs['tableRef'].doLayout();
          　　　});
　　　　    　　　this.needDoLayout = false; 
            } 
        }
    } 
</script>

el-table设置列属性fixed导致滚动条无法拖动-骨灰级

悦读