在開發前端項目過程中，解決適配性、兼容性問題是經常遇到且費事費力的苦差事，尤其是在開發Vue項目，應用部署在IE（尤其是IE9）上的時候。
在進行動態展示（根據後臺返回的表頭、表數據展示）搜索結果時，會遇到搜索結果適配屏幕寬度或高度，但是卻會出現縱向或橫向滾動條的現象，通過F12調試頁面元素，會發現動態的增刪overflow:auto元素屬性，會解決以上問題。由此可知，動態渲染頁面元素時，頁面加載之前，由於頁面元素尚未完全加載計算元素屬性值結束，會造成屏幕出現不適配，即會出現橫向縱向滾動條的問題，現在的解決方案就是通過模擬增刪overflow:auto元素屬性，達到重新計算元素屬性值以實現屏幕適配。
表格錯位
-
問題描述：
對於表格中的操作欄位處於表格右側時，會發現表格會出現上下滾動過程中數據列與操作列錯位情形。 -
問題分析：
對於該問題，通過查看元素屬性，會發現是由於元素中border寬度多大導致的。 -
解決方案：
通過消除多餘的元素border寬度，即取消元素border(注意：表頭和td均需包含)，可解決以上問題。
類似寫法如下：
.ele .el-table__row td:nth-last-child(1), .ele el-table__header-wrapper th:nth-last-child(1) {
border-right:none;
}
.ele .el-table__row td:nth-last-child(2), .ele el-table__header-wrapper th:nth-last-child(2) {
border-right:none;
}
橫向滾動條
-
問題描述：
對於表格中的操作欄位處於表格左側時，會發現表格會出現上下滾動過程中數據列與操作列錯位情形。 -
問題分析：
對於該問題，通過查看元素屬性，會發現是由於頁面出現橫向滾動條導致的。 -
解決方案：
通過消除橫向滾動條，可解決以上問題。
通過網絡查詢的解決方案如下：
-
方案一：嘗試在渲染後修改數據讓table重繪
在配置化組件的updated鉤子更新 columns 數據（中間需做一層轉換，禁止直接修改 props），但 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;
}
}
經過項目實踐，發現方案三可行，但需要進行適當改造。
方案三適用於頁面數據展示，當將表格數據展示功能抽取成組件形式後，當對頁面數據進行增刪操作時，會發現橫向滾動條出現，進而導致表格錯位問題復現，根據父子組件通信過程，可通過父組件向子組件傳一隨機數的方式，當檢測到子組件表格數據變化時，父組件將該隨機數傳給子組件，從而告知子組件表格數據已變化，需要重新計算頁面元素，具體代碼如下：
watch: {
initnumer (val) {
if (val === 0) return
this.showAfterRenderClass = false
}
}