element Plus中 el-table表头宽度自适应,不换行

在工作中,使用el-table表格进行开发后,遇到了小屏幕显示器上显示表头文字会出现换行展示,比较影响美观,因此需要让表头的宽度变为不换行,且由内容自动撑开。

以下是作为工作记录,用于demo演示教程

先贴个需要优化的代码

javascript 复制代码
<template>
    <div style="width: 100%;height: 100%;overflow: hidden;">
        <el-table :data="tableData" >
            <el-table-column prop="date" label="info_Date"/>
            <el-table-column prop="name" label="info_Name"/>
            <el-table-column prop="age" label="info_Age"/>
            <el-table-column prop="gender" label="info_Gender"/>
            <el-table-column prop="type" label="info_Type"/>
            <el-table-column prop="address" label="info_Address" />
        </el-table>
    </div>
</template>

<script lang="ts" setup>
const tableData = [
    {
        date: '05-03',
        name: '张三',
        age:18,
        gender:'男',
        type:'高中生',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '05-02',
        name: '李四',
        age:19,
        gender:'女',
        type:'大学生',
        address: 'No. 189, Grove St, Los Angeles',
    }
]
</script>

在页面中的效果是,表头出现了换行的情况

根据官网提示 列标题 Label 区域渲染使用的 Function => render-header,于是就使用这个方法对表头等宽度进行计算

javascript 复制代码
<template>
    <div style="width: 100%;height: 100%;overflow: hidden;">
        <el-table :data="tableData">
            <el-table-column prop="date" label="info_Date"  :render-header="renderHeader"/>
            <el-table-column prop="name" label="info_Name"  :render-header="renderHeader"/>
            <el-table-column prop="age" label="info_Age"  :render-header="renderHeader"/>
            <el-table-column prop="gender" label="info_Gender"  :render-header="renderHeader"/>
            <el-table-column prop="type" label="info_Type"  :render-header="renderHeader"/>
            <el-table-column prop="address" label="info_Address"  :render-header="renderHeader"/>
        </el-table>
    </div>
</template>



const renderHeader = ({ column }) => {
    //创建一个元素用于存放表头信息
    const span = document.createElement('span')
    // 将表头信息渲染到元素上
    span.innerText = column.label
    // 在界面中添加该元素
    document.body.appendChild(span)
    //获取该元素的宽度(包含内外边距等信息)
    const spanWidth = span.getBoundingClientRect().width + 20  //渲染后的 div 内左右 padding 都是 10,所以 +20
    //判断是否小于element的最小宽度,两者取最大值
    column.minWidth = column.minWidth > spanWidth ? column.minWidth : spanWidth
    // 计算完成后,删除该元素
    document.body.removeChild(span)
    return column.label
}

效果已经实现

相关推荐
FIN6668几秒前
射频技术领域的领航者,昂瑞微IPO即将上会审议
前端·人工智能·前端框架·信息与通信
U.2 SSD10 分钟前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆10 分钟前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
excel13 分钟前
Vue Mixin 全解析:概念、使用与源码
前端·javascript·vue.js
IT_陈寒20 分钟前
Java性能优化:这5个Spring Boot隐藏技巧让你的应用提速40%
前端·人工智能·后端
勇往直前plus38 分钟前
CentOS 7 环境下 RabbitMQ 的部署与 Web 管理界面基本使用指南
前端·docker·centos·rabbitmq
Never_Satisfied41 分钟前
在JavaScript / HTML中,Chrome报错此服务器无法证实它就是xxxxx - 它的安全证书没有指定主题备用名称
javascript·chrome·html
艾小码44 分钟前
零基础学JavaScript:手把手带你搭建环境,写出第一个程序!
javascript
北海-cherish6 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
AALoveTouch7 小时前
网球馆自动预约系统的反调试
javascript·网络