如果没有给el-table-column指定宽度,默认情况下会平均分配给剩余的列。在列数比较多的情况,如果el-table宽度限定在容器内,单元格里的内容就会换行。强制不换行,内容要么在单元格内滚动,要么就会溢出或被截断。 产品想要的效果是:内容保持单行显示,列间距保持一致,表格超出容器允许水平滚动。el-table-column是支持设置固定宽度的
* el-table扩展工具 -- 列宽度自适应 - 获取列宽内文本宽度 * @param {*} text 文本内容 * @returns 文本宽度(int) */ const getTextWidth = (text: string) => { const span = document.createElement("span"); span.style.visibility = "hidden"; span.style.position = "absolute"; span.style....
可以根据实际渲染后的 DOM 元素宽度动态计算内容宽度就能设置列的宽度。 具体做法 通过查看渲染后的 DOM 元素发现,el-table 的表头和内容分别用了一个原生table,通过colgroup设置每列的宽度。就从这里入手,col的name属性值和对应的 td 的class值是一致的,这样就可以遍历对应列的所有单元格,找出宽度最大的单元格,用...
// 如果是中文字符,为字符分配15个单位宽度 flexWidth += 15 } else { // 其他种类字符,为字符分配8个单位宽度 flexWidth += 8 } } if (flexWidth < 60) { // 设置最小宽度 flexWidth = 60 } if (flexWidth > 250) { // 设置最大宽度 flexWidth = 250 } // console.warn(flexWidth) retur...
el-table-colunm增加resizeable属性,若想某一列宽度不可拖拽,设置resizeable属性为false 即可实现 三、问题 1.如表格中有固定列,拖拽折行会导致错位 解决方案:监听鼠标事件,通过doLayout重绘表格 注意:DOM更新一步操作,doLayout重新布局需要放在nextTick/setTimeout等异步操作中 ...
具体来说,min-width 被用来分配剩余的空间,而最终的实际宽度则由各列之间的比例决定。 html <el-table v-loading="loading" :data="tableData"> <el-table-column prop="id" label="ID" min-width="6%"></el-table-column> <el-table-column prop="name" label="姓名" ...
设置列的宽度,例如:<el-table :data="tableData"> <el-table-column prop="name" label="姓名" width="100"></el-table-column> <el-table-column prop="age" label="年龄" width="80"></el-table-column> </el-table>。这将使“姓名”列的宽度为100px,“年龄”列的宽度为80px。如果表格总宽度...
在上面的例子中，Name列的宽度为100px，Age列的宽度为80px，Address列的宽度为200px。2.使用自适应宽度 如果希望表格的宽度能够自适应容器的大小，可以使用el-table的fit属性。这将使得表格的宽度自动填充父容器的剩余空间。例如：```html <el-table :data="tableData" fit> <el-table-column prop="name" ...
在使用Element开发vue项目时，不设置el-table表格列的宽度，就会内容自适应显示，那如何设置el-table表格表格列宽呢？方法/步骤 1 打开一个vue文件，添加el-table表格组件，设置表格的内容显示为日期、姓名、地址。如图 2 在表格地址这一列中设置添加width为200，用于设置地址这一列宽度为200px。如图 3 保存vue文件...