这将使表格的最小宽度为300px,最大宽度为800px。当表格内容超出最大宽度时,表格会自动出现横向滚动条。 设置列的宽度,例如:<el-table :data="tableData"> <el-table-column prop="name" label="姓名" width="100"></el-table-column> <el-table-column prop="age" label="年龄" width="80"></el-...
如果设置了show-overflow-tooltip和align="center",可能会出现达到最大宽度后文字不剧中的情况,所以当宽度达到最大的时候不要显示tooltip就好了 headerDragend:function(newWidth, oldWidth, column) {lettotalWidth =document.body.clientWidth// 获取网页宽度if(column.label==='选择'&& newWidth >100) { column...
代码逻辑是通过vue 的watch 监控表格的数据data,计算每列的内容和表头的最大宽度,计算的时候把表格内容使用span标签包裹,然后计算span标签的宽度width:px,然后再加上表格的内边距, 就得到了列的最大宽度. <el-table :data="tableData" v-loading="loading" style="width: 100%;" > <el-table-column v-for...
我的需求是能实现自适应,且不出现横向滚动条,所以计算出来每列列宽后,把所有列宽加起来,得到total,然后用每列列宽除以total,就能得到每列列宽的长度百分比,比如用width=10%的方式去设置每列宽度,如果想展示完全每列内容,不介意出现横向滚动条,就直接用计算出来的列宽作为列的宽度就可以了,比如width=100 以下是计算...
主要是你需要去计算好 el-table 的宽度就是所有的 el-table-item 的最大宽度。除非说你把某一列的 width 不做设置,让一个列的宽度自适应填充表格的剩余控件。但是大部分情况下我们很有可能会超出 el-table 的最大宽度。比如说在一些系统缩放 150% 的笔记本浏览的情况下。 所以需要你去分析实际业务使用场景,然...
el-table表头宽度⾃定义 场景：1. 某列表头⽂字内容过长，要对每列表头⾃定义宽度 2. 表格row的每⼀column⽂字不换⾏，超过列宽则省略，mouseover有提⽰ 3. 对于label做滤值处理 <template> <el-row> <el-col :span="24"> <template> <el-table :data="tableData"> <!--设置show-...
在utils文件夹下新建 el_table.ts ,内容如下: /** * 表格列宽自适应 * @param prop 属性 * @param records 数据 * @param minWidth 最小宽度 * @param padding 列内边距 * @param fontSize 字体大小 */ export const getColumnWidth = (prop: string, records: any, minWidth = 80, padding = 12,...
</el-table-column> </el-table> </template> 给需要自适应列宽的column写一个动态的width :width="flexColumnWidth(label,prop)" <script> export default { methods: { /** * 遍历列的所有内容,获取最宽一列的宽度 * @param arr / getMaxLength (arr) { ...
只需要在 el-table-item 标签中添加属性 :show-overflow-tooltip="true" 例子 <template> <div style="width:100%; display: flex; justify-content: center;"> <el-table :data="tableData" stripe style="width: 80%"> <el-table-column prop="name" label="Name" min-width="180" /> <el-tabl...