个人网站的优点,做简单网站需要学什么软件有哪些内容,网站建设排名北京,做高端品牌网站在工作中#xff0c;使用el-table表格进行开发后#xff0c;遇到了小屏幕显示器上显示表头文字会出现换行展示#xff0c;比较影响美观#xff0c;因此需要让表头的宽度变为不换行#xff0c;且由内容自动撑开。
以下是作为工作记录#xff0c;用于demo演示教程
先贴个…在工作中使用el-table表格进行开发后遇到了小屏幕显示器上显示表头文字会出现换行展示比较影响美观因此需要让表头的宽度变为不换行且由内容自动撑开。
以下是作为工作记录用于demo演示教程
先贴个需要优化的代码
templatediv stylewidth: 100%;height: 100%;overflow: hidden;el-table :datatableData el-table-column propdate labelinfo_Date/el-table-column propname labelinfo_Name/el-table-column propage labelinfo_Age/el-table-column propgender labelinfo_Gender/el-table-column proptype labelinfo_Type/el-table-column propaddress labelinfo_Address //el-table/div
/templatescript langts 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,于是就使用这个方法对表头等宽度进行计算
templatediv stylewidth: 100%;height: 100%;overflow: hidden;el-table :datatableDatael-table-column propdate labelinfo_Date :render-headerrenderHeader/el-table-column propname labelinfo_Name :render-headerrenderHeader/el-table-column propage labelinfo_Age :render-headerrenderHeader/el-table-column propgender labelinfo_Gender :render-headerrenderHeader/el-table-column proptype labelinfo_Type :render-headerrenderHeader/el-table-column propaddress labelinfo_Address :render-headerrenderHeader//el-table/div
/templateconst 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
}
效果已经实现
