Resolving compatibility issues is often a laborious chore in front end projects, especially in Vue projects where applications are deployed on IE (especially IE9).

In dynamic display (according to the table header returned by the background, table data display) search results, will encounter the screen width or height, but will appear vertical or horizontal scroll bar phenomenon, through F12 debug page elements, will find dynamic add and delete overflow:auto element attribute, will solve the above problem. Therefore, when dynamically rendering page elements, before the page is loaded, the calculation of element attribute values has not been completed, resulting in improper screen adaptation, that is, horizontal and vertical scroll bars, the current solution is to simulate the addition and deletion of overflow: Auto element attribute, Achieves recalculation of element attribute values for screen fit.

Form dislocation

  • Problem Description: If the operation column in the table is on the right of the table, the data column and the operation column will be misaligned in the scrolling process of the table.
  • Problem analysis: For this problem, by looking at the element attributes, you can see that it is caused by the width of the border in the element.
  • Solution: The above problem can be solved by eliminating the redundant border element width, i.e. removing the border element (note: both header and TD must be included). It is similarly written as follows:
.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;
}
Copy the code

Horizontal scroll bar

  • Problem description: When the operation column in the table is on the left of the table, it is found that the data column and the operation column are dislocated in the scrolling process of the table.
  • Problem analysis: This problem is caused by a horizontal scroll bar on the page by looking at the element attributes.
  • Solution: The above problem can be solved by eliminating horizontal scroll bars.

The solution to network query is as follows:

  • Solution a: The updated hook of the configured component is used to update the columns data (a layer conversion is required in the middle, so direct modification of the props is not allowed), but the table does not seem to bind data bidirectionally, so the table does not change. The second width calculation will not be triggered.
  • Scheme 2: Try to remove the 2px border after rendering and debug it in the browser. After the left and right border of el-table, the scrollbar problem caused by content overflow can be solved; The updated 1s is updated to bind a class to the el-table and remove the border. However, the page aesthetics decreases after the border is removed.
  • Plan three: Hand the width calculation over to the browser

    Through the browser debugging, the discovery will be.el-table__body-wrappertheoverflowProperty hidden and then show, horizontal scroll bar does not appear, should be added againoverflow: 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.

Specific practices:

<! -- 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(() => {
    // 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
/* style (note not to set to scoped) */
/** Both configurationTable and afterRenderClass are designed to mark only changes within this component */.configurationTable .el-table__body-wrapper { overflow: hidden; } .afterRenderClass { .el-table__body-wrapper { overflow: auto; }}Copy the code

After the project practice, it is found that plan 3 is feasible, but it needs to be modified appropriately.

Scheme 3 is suitable for the page data show, when the form data to demonstrate function after extracting component form, when to add or delete the page data operation, will find that horizontal scroll bars appear, leading to form dislocation problems repetition, components according to parent-child communication process, by the parent component to a random number of child components, when they tested the child components form data changes, The parent component passes the random number to the child component to tell the child that the table data has changed and the page element needs to be recalculated as follows:

watch: {
  initnumer (val) {
  	if (val === 0) return 
  	this.showAfterRenderClass = false}}Copy the code