I wanted to play with jsfiddle, but it didn’t work, so I’ll show you a screenshot

Vue version:2.53.Element - UI version:1.413.Browser: Chrome66.03359.170.
Copy the code

You can find that the fixed height of the table not only appeared vertical scroll bar, horizontal scroll bar also appeared (can only scroll a little), in fact, the width is enough to display.

Then search the problem on the Internet, found the relevant issues github.com/ElemeFE/ele… Github.com/ElemeFE/ele…

Questioner #78 offers a solution github.com/QingWei-Li/…

Similar to #78, my table is also configured. The header and contents of the table are passed as attributes, which may lead to inaccurate calculation of the width of the table in the initial rendering, resulting in the final width exceeding 2px (the width of the border after checking). However, the solution is not applicable. On the one hand, the project adopts CDN loading method. On the other hand, I tried the code structure of 1.4.13 version is inconsistent with that of 1.0.1 version of the solution, and I do not know element component well, so I tried to solve it by myself.

First paste my table configuration code, easy to refer to later

<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="Operation">
        <template slot-scope="{row}"> <! Insert custom action buttons at parent level --> <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>

Copy the code

Option 1: Try to redraw the table by modifying the data after rendering

The updated hook for the configured component updates the columns data (a layer conversion is made in the middle, and no direct modification is made), but the table does not seem to bind the data bidirectionally. So the table does not change and the second width calculation is not triggered.

Plan 2: Try to remove the 2px border after rendering

After deleting the left and right border of. El-table in the browser debugging, the scrollbar problem caused by content overflow can be solved. < span style = “max-width: 100%; clear: both; min-height: 1pt;

Plan three: Hand the width calculation over to the browser

El-table__body-wrapper: overflow: auto; overflow: auto; overflow: auto; overflow: auto; overflow: auto; The browser recalculates the width of the table itself, so there is no need to display a horizontal scroll bar if the width is sufficient.

Here’s how to do it:

<! -- template -->
<el-table ref="configurationTable" border :data="data" :height="height" v-loading="isLoading" :class="['configurationTable', {afterRenderClass: showAfterRenderClass}]">
  <! -- xxx -->
</el-table>
Copy the code
// script
data () {
  return {
    showAfterRenderClass: false
  }
},
updated () {
  /** * Used to hide timer that shows unnecessary scrollX at fixed height * this was a width calculation bug in el-table's first rendering, which can be adjusted after rendering by reassigning Overflow: auto */
  const handleScrollX = setInterval((a)= > {
    // Check whether the table node has been generated. If not, check every 0.5s
    // Only if a real node is generated can the browser recalculate by modifying the overflow property
    if (this.$refs.configurationTable) {
      this.showAfterRenderClass = true
      clearInterval(handleScrollX)
    }
  }, 500)}Copy the code
ConfigurationTable and afterRenderClass are both used to mark only changes to the configurationTable within this component .el-table__body-wrapper { overflow: hidden; } .afterRenderClass { .el-table__body-wrapper { overflow: auto; }}Copy the code

conclusion

Since the maintenance of Elementary-UI V1 has been stopped, the new issue will not be mentioned. After that, we still need to migrate to Elementary-UI 2 (if you have a migration tool, you can recommend it to the official authorities), otherwise the black magic will increase the maintenance cost.