vue使用elementUI的表格，内容自适应

1.elementUI的官方是没有这个内容自适应的功能，只能自己来写，我利用了混合的方式来实现；
首先创建minixs/flexColumnWidth.js文件；

export const flexColumnWidthFN = {
  methods: {

    /**遍历列的所有内容，获取最宽一列的宽度
     * @param arr
     */
    getMaxLength(arr) {
      return arr.reduce((acc, item) => {
        if (item) {
          const calcLen = this.getTextWidth(item)
          if (acc < calcLen) {
            acc = calcLen
          }
        }
        return acc
      }, 0)
    },
    /**
     * 使用span标签包裹内容，然后计算span的宽度 width： px
     * @param valArr
     */
    getTextWidth(str) {
      let width = 200
      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 自适应列宽
     * @param prop_label: 表名
     * @param table_data: 表格数据
     */
    flexColumnWidth(data,label, prop) {
      // 1.获取该列的所有数据
      const arr = data.map(x => x[prop])
      arr.push(label) // 把每列的表头也加进去算
      // 2.计算每列内容最大的宽度 + 表格的内间距（依据实际情况而定）
      return (this.getMaxLength(arr) + 25) + 'px'
    },
  }
};

2.在需要的页面中引用

import { flexColumnWidthFN } from "@/mixins/flexColumnWidth";
 mixins: [flexColumnWidthFN],
<el-table-column
        prop="name"
        label="报警对象"
        show-overflow-tooltip
        :width="flexColumnWidth(tableData, '报警对象', 'name')"
 />

3.此方法完美的实现了内容的自适应，但是同一个表格不建议所有的列都设置这个，若是都设置那整个表格的宽度有可能不能满屏适应，具体效果可根据自己的需要来设置；