1. application
to el-table-column Add dynamic width
:width=“flexColumnWidth(‘pNumber’,tableData)”
<el-table-column prop="pNumber" :width="flexColumnWidth('pNumber',tableData)"
label=" Odd Numbers " align="center" />
2. Function implementation
stay methods{ } Declare functions in :
// Adaptive table column width flexColumnWidth(str, tableData, flag = 'max') { //
str Is the field name of the column ( Pass string );tableData Is the data source for the table ( Transfer variable ); //
flag Is an optional value , This parameter may not be transferred , Optional when transferring parameters 'max' or 'equal', Default to 'max' //
flag by 'max' Then set the column width to fit the longest content in the column ,flag by 'equal' Then set the column width to fit the length of the first row in the column . str = str + '' let
columnContent = '' if (!tableData || !tableData.length || tableData.length ===
0 || tableData === undefined) { return } if (!str || !str.length || str.length
=== 0 || str === undefined) { return } if (flag === 'equal') { //
Gets the first non empty data in the column ( content ) for (let i = 0; i < tableData.length; i++) { if
(tableData[i][str].length > 0) { // console.log(' This column of data [0]:', tableData[0][str])
columnContent = tableData[i][str] break } } } else { // Gets the longest data in the column ( content ) let
index = 0 for (let i = 0; i < tableData.length; i++) { if (tableData[i][str]
=== null) { return } const now_temp = tableData[i][str] + '' const max_temp =
tableData[index][str] + '' if (now_temp.length > max_temp.length) { index = i }
} columnContent = tableData[index][str] } // console.log(' This column of data [i]:',
columnContent) // The unit length of the following distribution can be adjusted according to the actual demand let flexWidth = 0 for (const char of
columnContent) { if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <=
'z')) { // If it is English characters , Assign to characters 8 Unit width flexWidth += 8 } else if (char >= '\u4e00' &&
char <= '\u9fa5') { // If it is a Chinese character , Assign to characters 15 Unit width flexWidth += 15 } else { //
Other types of characters , Assign to characters 8 Unit width flexWidth += 8 } } if (flexWidth < 80) { // Set minimum width flexWidth
= 80 } // if (flexWidth > 250) { // // Set maximum width // flexWidth = 250 // } return
flexWidth + 'px' }

Technology
©2019-2020 Toolsou All rights reserved,
Huawei 2021 session Hardware Engineer Logical post (FPGA) Super detailed surface !!!Vue-element-admin upgrade ui edition virtual machine VMware Download and install the most detailed tutorial !C++ Move constructor and copy constructor sound of dripping water java Backstage interview pygame Realize full screen mode and adjustable window size mysql Database setting character set configuration modification my.ini file (windows)30 What's the experience of being a junior programmer at the age of 20 C++ Multithreading programming ( Summary of common functions and parameters )python_ cherry tree