调整列宽
第一步给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 = 0const html = document.createElement('span')html.innerText = strhtml.className = 'getTextWidth'document.querySelector('body').appendChild(html)width = document.querySelector('.getTextWidth').offsetWidthdocument.querySelector('.getTextWidth').remove()return width}
自适应调整表格宽度
需求：列宽改变，整个表格宽度也会改变，需要自适应
解决：将el-table整体写入一个div块，将块display设置为inline-block,如下：
<div style="display:inline-block"><el-table :data="tableData">/<el-table></div>
频繁自适应宽度会导致报错，报错内容“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报错解决方案
日常问题记录一下
