Vue注册全局方法--本示例用于el-table的列宽自适应【若依前后端分离】

1、创建全局方法global.js

文件路径ruoyi-ui——>src——>global.js

global.js内容

  /**
   * 遍历列的所有内容，获取最宽一列的宽度
   * @param arr
   */
export function getMaxLength (arr) {
    return arr.reduce((acc, item) => {
      if (item) {
        const calcLen = getTextWidth(item)
        if (acc < calcLen) {
          acc = calcLen
        }
      }
      return acc
    }, 0)
  }

  /**
   * 使用span标签包裹内容，然后计算span的宽度 width： px
   * @param valArr
   */
  export function  getTextWidth (str) {
    let width = 0
    const 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
  }

  /**
   * el-table-column 自适应列宽
   */
  export function  flexColumnWidth (label, prop,list) {
    // 1.获取该列的所有数据
    console.log("list",list);
    const arr =list.map(x => x[prop])
    arr.push(label) // 把每列的表头也加进去算
    //console.log(arr)
    // 2.计算每列内容最大的宽度 + 表格的内间距（依据实际情况而定）
    return (getMaxLength(arr) + 40) + 'px'
  }


export default {
    flexColumnWidth
}

 2、在页面index.vue中应用

在需要表格列宽自适应的页面中引入方法，methods中定义

<script>

import {flexColumnWidth} from '@/global'

methods: {
  //列宽自适应
  getFlexColumnWidth(label, prop,list){
    return flexColumnWidth(label, prop,list)
  },

}

</script>

表格中给每列添加列宽自适应方法 

<el-table v-loading="loading" :data="List" @selection-change="handleInventorySelectionChange" border resizable
          auto-resize="true" >
  <el-table-column label="选择" type="selection" width="55" align="center" fixed/>
  <el-table-column label="列1" align="center" prop="articleCode"
                   :width="getFlexColumnWidth('列1','Code',List)"
                   sortable fixed/>
  <el-table-column label="列2" align="center" prop="articleName"
                   :width="getFlexColumnWidth('列2','Name',List)"
                   sortable fixed/>

</el-table>