Element UI 的 el-table 组件提供了一个 fit 属性。当 fit 属性设置为 true 时,列宽会自动根据内容调整,并且表格的宽度会自适应父容器的宽度。 html <el-table :data="tableData" fit border> <el-table-column prop="date" label="日期"></el-table-column> <el-table-colum...
el-table的el-table-column如果不指定width的话,会自动设定一个宽度,表格内容会自动换行,对强迫症用户来说非常不友好,为了追求完美用户体验,所以这里需要实现两个效果: 强制表格内容不换行显示 实现表格列宽自适应撑开 <template> <el-tableref="tableRef"v-loading="loading":data="tableData"border stripe :header...
el-table-column是支持设置固定宽度的,在内容宽度可预知的情况下,也能满足这个需求。问题就在于如何让列宽动态适应内容的宽度。在官方文档也没找到这样的选项,应该是组件本身不支持。 二、技术实现 通过插件v-fit-columns即可实现,列宽自适应。 安装插件 代码语言:javascript 代码运行次数:0 复制 Cloud Studio代码运行 ...
<el-table-column label="操作"class-name="handle-column" :width="autoWidth"align="left" fixed="right"> </el-table-column> 获取列表数据的时候,自适应调整宽度 getTableList(data) {this.tableList =data;this.$nextTick(() =>{ const tds= document.querySelectorAll('td.handle-column>.cell')if...
el-table-column标签不设置宽度 <el-table :data="tableData" table-layout='auto' class="tableAuto"> <el-table-column prop="name" label="名称" /> </el-table> //设置超出不折行 .tableAuto.el-table .cell { white-space: nowrap; } 弊端: 1.el-table-column左侧多个列加fixed属性,左右滑动...
// tableData为表格内容 // flag为可选值,可不传该参数,传参时可选'max'或'equal',默认为'max' // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。 str = str + '' let columnContent = '' ...
// 自适应表格列宽 flexColumnWidth (str, arr1, flag = 'max') { console.log(str) // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量); // flag为可选值,可不传该参数,传参时可选'max'或'equal',默认为'max' // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'...
当Table带有分页时, 切换分页不会重新触发mounted, 但Table的列内容的最大宽度可能需要重新计算, 所以需要在updated中重新计算autoWidth: methods:{updateAutoWidth(){letcells=window.document.querySelectorAll(`td.${this.columnId}.${this.fitByClass}`);if(isEmpty(cells)){cells=window.document.querySelect...
不需要控制,如果你单独给设置了 width 属性的话,就会按照你设置的宽度了。 有用 回复 邮差: 你可能没试过某个数据是很长那种情况吧比如16位数 字,或者10几个文字。不然我也不会提这个问题哈哈目前网上有af- table-column 跟v-fit-column这两种可以采用,但不完美 回复2023-02-10 来自北京 陟上晴明: @邮差...
1.el-table-column不设置width与minwidth,每一列自适应,宽度一致 2.el-table-column设置width=30%,无效。 el-table 组件会被 vue 解析成 html, width 设置百分比的值直接被解析去掉百分号变成 px 了 3.el-table-column设置min-width="30"或者30%,每一列都设置min-width才能实现每一列的百分比配置 ...