ElementUI中el-table表格列宽自适应以及封装

ElementUI中el-table表格列宽自适应以及封装

先上效果再说话

el-table表格的列宽有自适应宽度，
这个功能我应该~~怎么说呢~~ ？
emmm…用的的应该都知道有啥缺点吧？

老规矩，自己动手、丰衣足食…

PS：此文章只能解决列宽自适应，操作列不适用 ，如果你想要操作列自适应，请看el-table操作列自适应以及封装

调用自适应方法示例：(超级简单：只需要在列上调用全局方法即可)

<template>
    <div>
		
        <el-table :data="records" stripe fit border v-loading="isLoading">
        
            <!-- 	
            		此 el-table-column 调用自适应宽度函数，并传递两个参数 
					参数1：departmentAbbreviation 代表字段名，填入prop的值即可，
					参数2：Array类型，数据集(表格绑定的数据)
			-->
            <el-table-column prop="departmentAbbreviation" label="字段" :min-width="$getColumnWidth('departmentAbbreviation',records)"> </el-table-column>
            
           <!-- 其他<el-table-column> -->
           
        </el-table>    
    </div>
</template>

<script>
export default {
    data(){
        return{
            // 数据集
            records:[]
        }
    },
    
    methods:{
      		// 方法 ...
    }
}
</script>

<style scoped>
</style>

封装全局参数$getColumnWidth(props,data)的过程以及注册

1.写一个util类el_table.js

/**
 * el-table扩展工具  -- 列宽度自适应 
 * @param {*} prop 字段名称(string) 
 * @param {*} records table数据列表集(array)
 * @returns 列宽(int)
 */
export function getColumnWidth(prop, records) {
    const minWidth = 80; // 最小宽度
    const padding = 10; // 列内边距

    const contentWidths = records.map((item) => {
        const value = item[prop] ? String(item[prop]) : "";
        const textWidth = getTextWidth(value);
        return textWidth + padding;
    });

    const maxWidth = Math.max(...contentWidths);
    return Math.max(minWidth, maxWidth);
}
/**
 * el-table扩展工具  -- 列宽度自适应 - 获取列宽内文本宽度
 * @param {*} text 文本内容
 * @returns 文本宽度(int)
 */
function getTextWidth(text) {
    const span = document.createElement("span");
    span.style.visibility = "hidden";
    span.style.position = "absolute";
    span.style.top = "-9999px";
    span.style.whiteSpace = "nowrap";
    span.innerText = text;
    document.body.appendChild(span);
    const width = span.offsetWidth + 5;
    document.body.removeChild(span);
    return width;
}

// ...其他方法

2、将el_table.js里面的方法getColumnWidth在main.js里注册为全局

import Vue from 'vue'
import { getColumnWidth } from './utils/el_table'
// import ...

// 把组件放入全局
Vue.prototype.$getColumnWidth = getColumnWidth;
// .......

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

3、调用该全局方法，使用时传递两个值即可

 <el-table-column prop="name" label="姓名" :min-width="$getColumnWidth('name',records)" >
 </el-table-column>