您的位置:首页 > 健康 > 美食 > 武汉网站设计公司哪家好_程序开发教程_免费推广的平台_360免费建站官网

武汉网站设计公司哪家好_程序开发教程_免费推广的平台_360免费建站官网

2025/3/17 20:44:51 来源:https://blog.csdn.net/Working_hard_111/article/details/144260338  浏览:    关键词:武汉网站设计公司哪家好_程序开发教程_免费推广的平台_360免费建站官网
武汉网站设计公司哪家好_程序开发教程_免费推广的平台_360免费建站官网

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

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

先贴个需要优化的代码

<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,于是就使用这个方法对表头等宽度进行计算

<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
}

效果已经实现

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com