記一次element-ui配置化table元件的適應性問題（橫向滾動條）

天驅發表於2018-05-17
UI元件

本來想在 jsfiddle 重現下的，結果沒有成功，就給大家看截圖吧

截圖

vue版本：2.5.3
element-ui版本：1.4.13
瀏覽器：chrome 66.0.3359.170
複製程式碼

大家可以發現，固定了高度的 table 不僅出現了縱向滾動條，橫向滾動條也出現了（只能滾動一點點），其實寬度是足夠顯示的。

然後將問題在網上搜尋，查到了相關的issues github.com/ElemeFE/ele… github.com/ElemeFE/ele…

其中#78的問答者給出了一個解決方案github.com/QingWei-Li/…

有一點和#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（如果大家有遷移工具的話歡迎推薦，官方踩過坑也可以推薦），不然留下這個黑魔法增加維護成本。

相關文章