Cell width calculation table vue + element in the dynamic

Demand is such that I have written before, it is to render the front end of the table data is dynamic rendering of the table rows and columns,

Then inevitably there is a problem, when the column more than a certain number of times, there will be horizontal scroll bar,

So how to make the overall table look natural coordinate some of it, the boss requires a table cell width is calculated based on dynamic content, maximum 200px,

so do it

template codes:

min-width to dynamically set

 1 <template v-for="(item,i) in table.titleData">
 2           <el-table-column
 3             :min-width="item.columnWidth"
 4             show-overflow-tooltip
 5             :key="i"
 6             v-if="item.is_show == '1'"
 7             :prop="item.field_code"
 8             :label="item.field_title"
 9             align="center"
10           ></el-table-column>
11         </template>

script Code:

In the table data, when acquired, for each data object set columnWidth properties, 50px initial value,

Then in the implementation of tableWidthAdaptation method, which is the key

 1 if (error == 0) {
 2         // 遍历title_list,将columnWidth:50px写入每个对象中
 3         for(let i in title_list) {
 4           title_list[i].columnWidth = '50px'
 5         }
 6         this.table.groupSearchList = group_list;
 7         this.table.titleData = title_list;
 8         this.table.tables = list;
 9         this.table.total = count;
10         this.table.currentPage = res.data.result.page; //当前页
11         setTimeout(function() {
12           _this.tableWidthAdaptation();
13         },100);
14       }

. 1  tableWidthAdaptation () {
 2        the let rows = the this .. $ $ Refs.tableData el.childNodes [2] .childNodes [0] .childNodes [. 1 ] .Rows;
 . 3        // the console.log (rows) 
. 4        the let ARR = [ ];
 . 5        for (the let I = 0; I <rows.length; I ++ ) {
 . 6          for (the let J = 0; J <rows [I] .cells.length; J ++ ) {
 . 7              the let rows W = [I]. cells [J] .childNodes [0 ] .offsetWidth;
 . 8              // determining the value of w is less than 50, compared with 50px, 200px was greater than 200, the other is 12px + w 
. 9              IF (w <50 ) {
 10                w = 50 + "px";
 . 11              } the else  IF (W> 200 is ) {
 12 is                W + = 200 is "PX" ;
 13 is              } the else {
 14                W = W + + 12 is "PX" ;
 15              }
 16              IF ! (ARR [J] || ARR [J ] < W) {
 . 17                ARR [J] = W;
 18 is              }
 . 19          }
 20 is        }
 21 is        the let titleData = the this .table.titleData
 22 is        // traverse width obtained titleData written titleData field 
23       for (let z = 0; z < titleData.length; z++) {
24         const value = titleData[z];
25         value.columnWidth = arr[z]
26       }
27     },

let rows = this $ refs.tableData $ el.childNodes [2] .childNodes [0] .childNodes [1] .rows;.. to obtain a table of each row of data

Then traversing to give each cell width let w = rows [i] .cells [j] .childNodes [0] .offsetWidth;

Finally, the value assigned to the titleData, assigned to the page for loop min-width above