首页 前端知识 ElementUI中el-table表格列宽自适应以及封装

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

2024-05-05 12:05:19 前端知识 前端哥 789 340 我要收藏

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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/6895.html
标签
评论
发布的文章

String转Json的几种方式

2024-05-09 11:05:04

iOS ------ JSONModel源码

2024-05-09 11:05:02

java去除 json 中的 \n, \t, \r

2024-05-09 11:05:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!