一、概述 在表格宽度固定时,实现内容不换行,表格自动显示滚动条 当前显示效果: 期望实现效果: 二、实现思路 遍历表格数组,每次都构建一个隐藏的span元素,获取该元素的宽度,对比保存最大值 代码如下: /** * 表格列宽自适应 * @param prop 属性 * @param records
很多页面都需要用到表格组件el-table。如果没有给el-table-column指定宽度,默认情况下会平均分配给剩余的列。在列数比较多的情况,如果el-table宽度限定在容器内,单元格里的内容就会换行。强制不换行,内容要么在单元格内滚动,要么就会溢出或被截断。 产品想要的效果是:内容保持单行显示,列间距保持一致,表格超出容器允...
el-table的el-table-column如果不指定width的话,会自动设定一个宽度,表格内容会自动换行,对强迫症用户来说非常不友好,为了追求完美用户体验,所以这里需要实现两个效果: 强制表格内容不换行显示 实现表格列宽自适应撑开 <template> <el-tableref="tableRef"v-loading="loading":data="tableData"border stripe :header...
由于表头和列是分开渲染的,通过el-table 设置fit属性,只能撑开表头,但是没有办法根据列的内容去适应宽度。网上找了一些使用根据表格内容计算表头宽度的文章,记个笔记。 代码逻辑是通过vue 的watch 监控表格的数据data,计算每列的内容和表头的最大宽度,计算的时候把表格内容使用span标签包裹,然后计算span标签的宽度width...
方法二、设置表格样式table-layout: 'auto',让表格自适应文本内容,但需要根据单元格的宽度调整表头的宽度。这个方法的几个问题待优化: 1、表格加载数据时,表头宽度变化会闪烁一下 2、而且对于fixed属性的单元格宽度计算有点问题 css样式 table.el-table__body{table-layout:auto;}.cell{white-space:nowrap;}.el...
el-table的el-table-column如果不指定width的话,会自动设定一个宽度,表格内容会自动换行,对强迫症用户来说非常不友好,为了追求完美用户体验,所以这里需要实现两个效果: 强制表格内容不换行显示 实现表格列宽自适应撑开 【代码实现】 <template> <el-table
Element UI 表格【列宽自适应】 <template> <div class="page"> <el-table border style="width: 100%" :data="tableData"> <el-table-column v-for="(item, index) in tableTitleList" :key="index" :label="item.label" :type="item.type"...
当我们在不同大小的设备上使用El-table时,El-table会根据浏览器宽度自动调整列宽,以确保表格的数据显示完整,并提高用户的体验。 三、总结 本文介绍了如何使用ElementUI的El-table实现自适应列宽。通过设置一些自适应列宽的选项,El-table可以根据浏览器宽度自动调整列宽,以确保表格的数据显示完整,并提高用户的体验。通过...
elementUI_表格列自适应宽度
解决elementui表格操作列⾃适应列宽 业务需要前端根据⽤户权限动态显⽰对应按钮，直接把操作列的列宽写死的话，在按钮少的情况下不是那么好看，所以想到了⼀个骚操作...写死宽度时是这样的：开始 给操作列绑定宽度属性 :width="actionColWidth < 80 ? 80 : actionColWidth"把操作列的所有按钮⽤⼀个div...