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, it will be found that the data column and the operation column are 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 due to the width of the border in the element.

  • Solution:

The above problem can be solved by eliminating the excess element border width, i.e. removing the element BORDER (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:

If the operation column in the table is on the left side of the table, it will be found that the data column and the operation column will be misplaced in the scrolling process of the table.

  • Problem analysis:

The 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:

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

The updated hook of the configured component updates the columns data (a layer conversion is required to prevent direct modification of props), but the table does not appear to be bidirectional binding, so the table does not change and does not trigger the second width calculation.

  • 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. 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

El-table__body-wrapper: 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.

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 displays unnecessary scrollX when fixed height * */ const handleScrollX = setInterval(() => {// Check whether the table has been generated, If not a / / every 0.5 s examination is only able to generate the real node by modifying the overflow property to browser to recalculate the if (this. $refs. ConfigurationTable) {enclosing 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

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