vue el-table form adaptive content width

Since the header and columns are rendered separately, by setting fit el-table attribute, only the expansion header, there is no way to adapt the contents of the column width. Internet to find some calculations based on the width of the header table using the contents of the article, write a note.

Code logic is the maximum width of the data of the watch data vue monitor table, the contents of each column is calculated and the header, the calculation of the time span is wrapped table of contents, and then calculates the width of the span tag width: px, then add table padding,

We get the maximum width of the column.

<el-table :key="key" :data="data"  v-loading="loading" style="width: 100%;" >
      <el-table-column v-for="fruit in formThead"
                   :key="fruit.prop"
                   :label="fruit.label"
                   :width="fruit.width"  <!-- 设置宽度 -->
                   show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row[fruit.prop] }}
        </template>
    </el-table-column>
</el-table>

<script>
const defaultFormThead = fields.map(x => x.prop);

const fields = [
    {label:"ID", prop:"id"},
    {label:"资产名称", prop:"asset_name"},
    {label:"OA工单号", prop:"oa_jon_num"},
    {label:"IP", prop:"ipaddress"},
    {label:"SN号", prop:"sn"},
    {label:"CPU(核)", prop:"cpu"},
    {label:"内存(G)", prop:"memory"},
    {label:"存储(G)", prop:"disk"},
    {label:"资产类型", prop:"device_type_name"},
    {label:"资产状态", prop:"device_status_name"},
    {label:"所属环境", prop:"device_env_type_name"},
    {label:"Room", prop: "the root" }, 
    {label: "equipment use" prop: "Purpose" }, 
    {label: "rack position" prop: "rack_position" }, 
    {label: "the U-bit" prop: "u_position" }, 
    {label: "your IDC room", prop: "idc_name" }, 
    {label: "device model", prop: "equipment_type" }, 
    {label: "purchase date", prop: "purchase_date " }, 
    {label: " your system type ", prop:" SYS_NAME " }, 
    {label: " belongs to two product lines ", prop:" SECOND_NAME " }, 
    {label: "Ordinary physical machine ", prop:" parent_asset_name " }, 
    {label: " creation time ", prop:" create_at " } 
]


Export default { 
    Data () { 
        return { 
            URL: "Asset" , 
            Key: . 1, // Table Key 
            formThead: Fields // default header header the Default 
        }; 
    }, 

    Methods: { 
        / * * 
        * loop through all the contents of the column, Get a widest width 
        * @param ARR 
        * / 
        getMaxLength (ARR) { 
          return arr.reduce ((ACC, Item) => {
             IF (Item) { 
              the let calcLen = the this .getTextWidth (Item)
               IF(ACC < calcLen) { 
                ACC = calcLen 
              } 
            } 
            return ACC 
          }, 0 ) 
        }, 
        / * * 
         * span is wrapped, and then calculates the width of the span width: PX 
         * @param valArr 
         * / 
        getTextWidth (STR) { 
          the let width 0 = ; 
          the let HTML = document.createElement ( 'span' ); 
          html.innerText = STR; 
          html.className = 'getTextWidth' ; 
          document.querySelector ( 'body') .appendChild (HTML); 
          width = document.querySelector ( 'getTextWidth.' ) .offsetWidth; 
          document.querySelector ( '.getTextWidth' ) .remove ();
           return width; 
        } 
    }, 
    
    Watch: { 
        / * * 
         * monitoring form data data, automatic setting table width 
         * @param valArr 
         * / 
        data (valArr) { 
            const _this = the this 
            the this .formThead = fields.map ( function (value) { 
                const ARR = valArr.map (X => X [value. prop])   // get all the data in each column
                arr.push (value.label)   // the header of each column is also added to the list count 
                value.width = _this.getMaxLength (ARR) + 20 is // for each column the maximum content + the pitch width of the table (based on the actual situation fixed) 
                return value 
            }) 
        } 
    } 
}
 </ Script>