本來想在 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">
<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>
方案一:嘗試在渲染后修改數據讓table重繪
在配置化組件的updated
鉤子更新 columns 數據(中間做了一層轉換,沒有直接修改 props ),但 table 貌似不會將數據進行雙向綁定(這方面不確定,只是我調試時修改 table 的內容不能實時更新,需要刷新瀏覽器),所以 table 沒有出現改變,也就不會觸發第二次寬度計算。
方案二:嘗試在渲染后將2px的border去掉
在瀏覽器中調試發現去掉.el-table
的左右 border 后,是可以解決內容溢出產生滾動條的問題的;具體做法是在 updated 1s后給el-table
綁定一個 class,去除 border,但沒有 border 太不美觀了。。。
方案三:將寬度計算交給瀏覽器
也是在瀏覽器中調試,發現將.el-table__body-wrapper
的overflow屬性隱藏再顯示,橫向滾動條就不會出現了,應該是重新添加overflow: auto;
使得瀏覽器自身重新計算了 table 的寬度,所以寬度足夠的情況下不需要顯示橫向滾動條;
那做法就是:
<!-- 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(如果大家有遷移工具的話歡迎推薦,官方踩過坑也可以推薦),不然留下這個黑魔法增加維護成本。