By Jing Zhaoxia

Source public number/notes on light and shadow of the morning glow

ID / zhaoxiajingjing

Sunday, Sunday, Sunday, Sunday, Sunday, Sunday, Sunday, Sunday, Sunday, Sunday, Sunday, Sunday

If you think my plan is too low, please slap your face gently

If you have a better plan, please feel free to comment ~

0 /

demand

“Iview “: “2.13.0” For some reason, the version has not been upgraded.

Functions realized by the table in the project:

  • Normal form
  • Fixed column
  • Custom selection display column
  • Merge rows
  • chopper
  • Merge header

Due to the large number of columns, users may want to drag and drop column widths themselves to better compare certain data. However, drag and drop was implemented in the new iView version 4.0.0+.

1 /

Drag and drop functionality

Compare the latest iView source code with the existing code in the project, and put drag and drop functionality in the project source code.

  • cell.vue
  • mixin.js
  • table-body.vue
  • table-head.vue
  • table-tr.vue
  • table.vue
  • slot.js
  • summary.vue
  • Table.less Don’t forget the style file

When use

  1. The form should have a border
  2. The column property width must have a value
  3. The properties of the columnresizable:true

2 /

The solution

See that the actual rendered table width differs by some width from the set table width. At this point, each column will be homogenized, affecting the width of the last column as a scroll bar.

** Use scheme: ** Put the extra width, by calculation, on other columns except the last column of the scroll bar.

Find the handleResize method in the table.vue file

/ /... code
for (let i = 0; i < this.cloneColumns.length; i++) {
    const column = this.cloneColumns[i];
    letwidth = columnWidth + (column.minWidth? column.minWidth:0);
    if(column.width){
        /* width = column.width; This is the original code */
        // When the table width is insufficient, spread the excess over the columns: solve the scroll bar width problem
        width = usableWidth>0&&this.showVerticalScrollBar ? column.width+usableWidth/this.cloneColumns.length : column.width;
        column.width= width; // Note: Assign the updated value to the original column width so that it will be used during rendering
    }
    / /... code
}
/ /... code
Copy the code

Please have a better plan of the big guy, don’t hesitate to give advice ~~~ thanks ~

3 /

You might like
  1. Topic | let and var (1, 2) the difference between
  2. Difference between graphic | let and var (1, 2)
  3. Topic | difference with VAR and without VAR
  4. Graphic | difference with VAR and without VAR
  5. Summary | LET and distinguish the VAR (3, 4)
  6. Graphic | scope and the scope chain
  7. Exercises | scope and the scope chain