el-table-column是支持设置固定宽度的,在内容宽度可预知的情况下,也能满足这个需求。问题就在于如何让列宽动态适应内容的宽度。在官方文档也没找到这样的选项,应该是组件本身不支持。 二、技术实现 通过插件v-fit-columns即可实现,列宽自适应。 安装插件 代码语言:javascript 复制 npm install v-fit-columns--save 引...
el-table的el-table-column如果不指定width的话,会自动设定一个宽度,表格内容会自动换行,对强迫症用户来说非常不友好,为了追求完美用户体验,所以这里需要实现两个效果: 强制表格内容不换行显示 实现表格列宽自适应撑开 【代码实现】 <template> <el-table ref="tableRef" v-loading="loading" :data="tableData" ...
table.style.width = table.offsetWidth + 'px' } } }) 这个,这样就能实现表格宽度的自适应。 然后,在你的el-table组件上使用这个自定义指令: html <el-table v-table-width> <!-- your table data here --> </el-table> 注意,这个指令只能改变表格的宽度,不能改变列的宽度。如果你需要改变列的宽度,...
给el-table 设置好了最大可宽度之后,内部的 <el-table-item> 就会按照各列的比例自动展开了。不需要控制,如果你单独给设置了 width 属性的话,就会按照你设置的宽度了。 有用 回复 邮差: 你可能没试过某个数据是很长那种情况吧比如16位数 字,或者10几个文字。不然我也不会提这个问题哈哈目前网上有af- tabl...
但有时候会有一些定制性比较高的需求,组件本身可能没办法满足。最近在项目里就碰到了。 很多页面都需要用到表格组件el-table。如果没有给el-table-column指定宽度,默认情况下会平均分配给剩余的列。在列数比较多的情况,如果el-table宽度限定在容器内,单元格里......
很多页面都需要用到表格组件el-table。如果没有给el-table-column指定宽度,默认情况下会平均分配给剩余的列。在列数比较多的情况,如果el-table宽度限定在容器内,单元格里的内容就会换行。强制不换行,内容要么在单元格内滚动,要么就会溢出或被截断。 产品想要的效果是:内容保持单行显示,列间距保持一致,表格超出容器允...
给el-table 设置好了最大可宽度之后,内部的 <el-table-item> 就会按照各列的比例自动展开了。不需要控制,如果你单独给设置了 width 属性的话,就会按照你设置的宽度了。 有用 回复 邮差: 你可能没试过某个数据是很长那种情况吧比如16位数 字,或者10几个文字。不然我也不会提这个问题哈哈目前网上有af- tabl...