本来想在 jsfiddle 重现下的,结果没有成功,就给大家看截图吧
vue版本:2.5.3
element-ui版本:1.4.13
浏览器:chrome 66.0.3359.170
大家可以发现,固定了高度的 table 不仅出现了纵向滚动条,横向滚动条也出现了(只能滚动一点点),其实宽度是足够显示的。
然后将问题在网上搜寻,查到了相关的issues
https://github.com/ElemeFE/element/issues/2945
https://github.com/ElemeFE/element/issues/78
其中#78的问答者给出了一个解决方案https://github.com/QingWei-Li/element/commit/a019e57da9f6271d120e04c67ab330c4f48e56c6
有一点和#78相似,我的 table 也是配置化的,表头和内容都是作为属性传过去,可能导致表格在初次渲染时宽度计算不准确,导致最后宽度超过了 2px(经查验是 border 的宽度);但解决方案不适用,一方面项目采用的是 cdn 加载方式,另一方面我尝试了 1.4.13 版本和解决方案的 1.0.1 版本代码结构不一致,而我对 element 组件不了解无从下手,所以我尝试自己去解决。
先贴上我配置化table的代码,便于后面查阅
<template>
<div>
<el-table border :data="data" height="550" v-loading="isLoading">
<