vue2 elementui在el-table组件中,固定单元格使用自定义滚轮样式

171 阅读1分钟

vue2 elementui在el-table组件中,固定单元格使用自定义滚轮样式

有时候需求是想要实现在固定单元格实现滑动,并且有自定义的滚轮样式。
这时候就只要在固定el-table-cloulmn使用插槽功能
(vue3插槽使用v-slot或者#default默认插槽) 在单元格的div中开启滚动 Quicker_20221018_082014.png

Quicker_20221018_083151.png

Quicker_20221018_083537.png

<el-table-column border prop="ExcpStck" label="异常堆栈">
                            <template slot-scope="scope">
                                <div style="overflow-y:scroll;height:120px;">
                                    <div v-for="(value,index) in scope.row.ExcpStck">
                                        {{scope.row}}
                                    </div>
                                </div>
                            </template>
</el-table-column>
::-webkit-scrollbar {
    width: 6px;
    /*滚动条宽度*/
    height: 7px;
    /*滚动条高度*/
    background-color: #daf2f4;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 0px white;
    -webkit-box-shadow: inset 1 1 3px #daf2f4;
    background-color: #1badba;
    /*滚动条的背景颜色*/
    border-radius: 20px;
}