<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 v-fit-columns><el-table-column label="No."type="index"class-name="leave-alone"></el-table-column><el-table-column label="Name"prop="name"></el-table-column><el-table-column label="Age"prop="age"></el-table-column></el-table> 在el-table后面加v-fit-columns即可,其他的...
<el-table-column prop="address" label="Address" :width="getColumnWidth('address', tableData)"/> </el-table> 三、全局注入 以vue3 + ts 为例 在utils文件夹下新建 el_table.ts ,内容如下: /** * 表格列宽自适应 * @param prop 属性 * @param records 数据 * @param minWidth 最小宽度 *...
el-table的el-table-column如果不指定width的话,会自动设定一个宽度,表格内容会自动换行,对强迫症用户来说非常不友好,为了追求完美用户体验,所以这里需要实现两个效果: 强制表格内容不换行显示 实现表格列宽自适应撑开 【代码实现】 <template> <el-table ref="tableRef" v-loading="loading" :data="tableData" ...
// 自适应表格列宽 flexColumnWidth (str, arr1, flag = 'max') { // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量); // flag为可选值,可不传该参数,传参时可选'max'或'equal',默认为'max' // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列...
<el-table-column v-for="(column, index) in columns" :key="index" :label="column.label" :width="column.width" <!-- 设置宽度 --> show-overflow-tooltip> <template slot-scope="scope"> {{ scope.row[column.prop] }} </template> ...
【vue】ElementUI el-table自适应列宽实现 【背景小记】 el-table的el-table-column如果不指定width的话,会自动设定一个宽度,表格内... 秒怂的哈士奇爱吃西瓜阅读 5,096评论 0赞 0 2020-06-13 el-table表头和表格列宽不一样 1、直接上图: 2、解决办法 2-1、网上找的办法 将以下样式代码添加到index.html...
产品想要的效果是:内容保持单行显示,列间距保持一致,表格超出容器允许水平滚动。el-table-column是支持设置固定宽度的,在内容宽度可预知的情况下,也能满足这个需求。问题就在于如何让列宽动态适应内容的宽度。在官方文档也没找到这样的选项,应该是组件本身不支持。
但在特定项目中，遇到了需要实现表格组件（el-table）列宽自适应的挑战。默认情况下，el-table 默认会平均分配给剩余的列宽度，导致在列数较多且容器宽度限定时，内容会换行。产品需求是要内容保持单行显示，列间距保持一致，表格超出容器允许水平滚动。面对需求，传统方法如给 el-table-column 指定固定宽度...