el-table自适应调整列宽，表格宽度

1. 调整列宽
   第一步给el-table-column 添加动态宽度

<el-table-column prop="name" label="功能名称" :width="flexColumnWidth('功能名称','name')">
</el-table-column>

第二步给定义计算列宽的计算方法
这一步借用一个大佬的写法，elementui的el-table根据列内容长度自适应调整列宽

/**
 * el-table-column 自适应列宽
 * @param prop_label: 表名
 * @param table_data: 表格数据
 */
flexColumnWidth(label, prop) {
    const arr = this.tableData.map(x => x[prop])
    if(arr.length>0){
        arr.push(label)  
        return (this.getMaxLength(arr) + 25) + 'px'
    }
    return 25+'px';
},
/**计算列内容最大宽度
* 遍历列的所有内容，获取最宽一列的宽度
* @param arr
*/
Vue.prototype.getMaxLength=function(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
*/
Vue.prototype.getTextWidth=function(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
}

2. 自适应调整表格宽度
   需求：列宽改变，整个表格宽度也会改变，需要自适应
   解决：将el-table整体写入一个div块，将块display设置为inline-block,如下：

<div style="display:inline-block">
	<el-table   :data="tableData">/<el-table>
</div>

3. 频繁自适应宽度会导致报错，报错内容“ResizeObserver loop limit exceeded”
   问题原因：
   1.el-table下的各列设置了min-width属性，这个属性在页面宽度不够时，element会根据各列设置的min-width，按比例计算宽度。当动态修改el-table内宽高时，el-table的min-width属性和此修改代码同时作用于table组件造成冲突，dom元素不断重绘，因此报错ResizeObserver loop limit exceeded : 超出ResizeObserver循环限制。
   解决办法：
   1.写死width
   2.resize时，给回调进行节流，使其1帧内最多执行一次。

import Vue from 'vue';
import ElementUI, { Table } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
// 解决 ElTable 自动宽度高度导致的「ResizeObserver loop limit exceeded」问题
const fixElTableErr = (table) => {
    const oldResizeListener = table.methods.resizeListener;
    table.methods.resizeListener = function () {
        window.requestAnimationFrame(oldResizeListener.bind(this));
    };
};
// 一定要在Vue.use之前执行此函数
fixElTableErr(Table);
Vue.use(ElementUI);
new Vue({
    el: '#app',
    render: (h) => h(App),
});

此解决办法来源于ResizeObserver loop limit exceeded报错解决方案

日常问题记录一下