一、概述 在表格宽度固定时,实现内容不换行,表格自动显示滚动条 当前显示效果: 期望实现效果: 二、实现思路 遍历表格数组,每次都构建一个隐藏的span元素,获取该元素的宽度,对比保存最大值 代码如下: /** * 表格列宽自适应 * @param prop 属性 * @param records
* @param {*} tableData tableData 表格数据源(变量) * @param {*} flag 'max'或'equal',默认为'max' * @param {*} flag flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度 * @return {*}*/functionflexColumnWidth(prop, label, tableData, flag =...
在使用Element UI的el-table组件时,如果你想要某一列实现自适应宽度,可以通过以下几种方法来实现: 方法一:使用:width属性和自定义方法 自定义一个方法来计算列宽: 你可以编写一个方法来根据列的内容动态计算列宽。这个方法需要遍历表格的数据,找到该列中最长的内容,然后根据这个内容的长度来设置列宽。 在el-table-...
如果没有给el-table-column指定宽度,默认情况下会平均分配给剩余的列。在列数比较多的情况,如果el-table宽度限定在容器内,单元格里的内容就会换行。强制不换行,内容要么在单元格内滚动,要么就会溢出或被截断。 产品想要的效果是:内容保持单行显示,列间距保持一致,表格超出容器允许水平滚动。el-table-column是支持设置...
el-table-column是支持设置固定宽度的,在内容宽度可预知的情况下,也能满足这个需求。问题就在于如何让列宽动态适应内容的宽度。在官方文档也没找到这样的选项,应该是组件本身不支持。 技术方案 于是想到了动态计算内容宽度的方案。网上也有人提过这个思路,做法是根据内容字符数来计算宽度。这种方法有几个局限: 内容...
https://github.com/mnm1001/ex-table-column 需求 项目中使用element-ui的el-table与el-table-column, 需求上需要实现列宽根据内容自适应. 实现方案 element-ui 的table组件本身有着强大的功能, 所以我们期望保留其现有功能, 然后进行扩展. 基于这样的前提, 继承el-table-column组件进行扩展是一个比较合适的方案....
可以根据实际渲染后的 DOM 元素宽度动态计算内容宽度就能设置列的宽度。 具体做法 通过查看渲染后的 DOM 元素发现,el-table 的表头和内容分别用了一个原生table,通过colgroup设置每列的宽度。就从这里入手,col的name属性值和对应的 td 的class值是一致的,这样就可以遍历对应列的所有单元格,找出宽度最大的单元格,用...
简介 在使用Element开发vue项目时，不设置el-table表格列的宽度，就会内容自适应显示，那如何设置el-table表格表格列宽呢？方法/步骤 1 打开一个vue文件，添加el-table表格组件，设置表格的内容显示为日期、姓名、地址。如图 2 在表格地址这一列中设置添加width为200，用于设置地址这一列宽度为200px。如图 3 保存vu...
但在特定项目中，遇到了需要实现表格组件（el-table）列宽自适应的挑战。默认情况下，el-table 默认会平均分配给剩余的列宽度，导致在列数较多且容器宽度限定时，内容会换行。产品需求是要内容保持单行显示，列间距保持一致，表格超出容器允许水平滚动。面对需求，传统方法如给 el-table-column 指定固定宽度...
el-table的el-table-column如果不指定width的话,会自动设定一个宽度,表格内容会自动换行,对强迫症用户来说非常不友好,为了追求完美用户体验,所以这里需要实现两个效果: 强制表格内容不换行显示 实现表格列宽自适应撑开 <template> <el-tableref="tableRef"v-loading="loading":data="tableData"border ...