原本想在 jsfiddle 重现下的,结果没有成功,就给你们看截图吧css
vue版本:2.5.3
element-ui版本:1.4.13
浏览器:chrome 66.0.3359.170
复制代码
你们能够发现,固定了高度的 table 不只出现了纵向滚动条,横向滚动条也出现了(只能滚动一点点),其实宽度是足够显示的。html
而后将问题在网上搜寻,查到了相关的issues github.com/ElemeFE/ele… github.com/ElemeFE/ele…vue
其中#78的问答者给出了一个解决方案github.com/QingWei-Li/…git
有一点和#78类似,个人 table 也是配置化的,表头和内容都是做为属性传过去,可能致使表格在初次渲染时宽度计算不许确,致使最后宽度超过了 2px(经查验是 border 的宽度);但解决方案不适用,一方面项目采用的是 cdn 加载方式,另外一方面我尝试了 1.4.13 版本和解决方案的 1.0.1 版本代码结构不一致,而我对 element 组件不了解无从下手,因此我尝试本身去解决。github
<template>
<div>
<el-table border :data="data" height="550" v-loading="isLoading">
<el-table-column v-for="{value, label, options} in columns" :key="value" :label="label" :prop="value">
<template slot-scope="{row}">
<span v-if="!options">{{row[value]}}</span>
<div v-else-if="options && options.filter">{{row[value] | filterData(options.filter)}}</div>
</template>
</el-table-column>
<el-table-column label="操做">
<template slot-scope="{row}">
<!--这里可在父级插入自定义操做按钮-->
<slot :row="row"/>
</template>
</el-table-column>
</el-table>
<Pagination :total="total" @fetchData="$emit('fetchData')"/>
</div>
</template>
<script>
import Pagination from 'FORM/Pagination'
import {formatTimestamp} from 'UTILS'
export default {
props: {
isLoading: {
type: Boolean,
default: false,
required: true
},
columns: {
type: Array,
default: [],
required: true
},
data: {
type: Array,
default: [],
required: true
},
total: {
type: Number,
default: 0,
required: true
}
},
components: {
Pagination
},
filters: {
filterData: function (value, filter) {
if (!filter) return value
switch (filter) {
case 'formatDate':
return formatTimestamp(value)
break;
default:
return value
}
}
}
}
</script>
复制代码
在配置化组件的updated
钩子更新 columns 数据(中间作了一层转换,没有直接修改 props ),但 table 貌似不会将数据进行双向绑定(这方面不肯定,只是我调试时修改 table 的内容不能实时更新,须要刷新浏览器),因此 table 没有出现改变,也就不会触发第二次宽度计算。chrome
在浏览器中调试发现去掉.el-table
的左右 border 后,是能够解决内容溢出产生滚动条的问题的;具体作法是在 updated 1s后给el-table
绑定一个 class,去除 border,但没有 border 太不美观了。。。element-ui
也是在浏览器中调试,发现将.el-table__body-wrapper
的overflow属性隐藏再显示,横向滚动条就不会出现了,应该是从新添加overflow: auto;
使得浏览器自身从新计算了 table 的宽度,因此宽度足够的状况下不须要显示横向滚动条;浏览器
那作法就是:bash
<!-- template -->
<el-table ref="configurationTable" border :data="data" :height="height" v-loading="isLoading" :class="['configurationTable', {afterRenderClass: showAfterRenderClass}]">
<!-- xxx -->
</el-table>
复制代码
// script
data () {
return {
showAfterRenderClass: false
}
},
updated () {
/** * 用于隐藏固定高度时显示没必要要的scrollX的定时器 * 这是el-table初次渲染时宽度计算的bug,可在渲染后经过从新赋予overflow: auto调整 */
const handleScrollX = setInterval(() => {
// 检测是否已经生成table节点,若是不是就每隔0.5s检测一次
// 只有生成了真实节点才可以经过修改overflow属性让浏览器从新计算
if (this.$refs.configurationTable) {
this.showAfterRenderClass = true
clearInterval(handleScrollX)
}
}, 500)
}
复制代码
/** style (注意不要设为scoped) */
/** configurationTable和afterRenderClass都是为了标记仅这个组件内修改 */
.configurationTable .el-table__body-wrapper {
overflow: hidden;
}
.afterRenderClass {
.el-table__body-wrapper {
overflow: auto;
}
}
复制代码
由于element-ui v1已经中止维护了,因此也就不提新的issue了,以后仍是须要迁移到element-ui2(若是你们有迁移工具的话欢迎推荐,官方踩过坑也能够推荐),否则留下这个黑魔法增长维护成本。app