一、概述 在表格宽度固定时,实现内容不换行,表格自动显示滚动条 当前显示效果: 期望实现效果: 二、实现思路 遍历表格数组,每次都构建一个隐藏的span元素,获取该元素的宽度,对比保存最大值 代码如下: /** * 表格列宽自适应 * @param prop 属性 * @param records
在使用ElementUI的el-table组件时,实现列宽自适应可以通过多种方法来实现,以适应不同的内容和屏幕尺寸。以下是几种常见的方法: 1. 使用v-fit-columns插件 这是一个第三方插件,可以方便地实现el-table的列宽自适应。 安装插件: bash npm install v-fit-columns --save 引入插件: javascript import Vue from...
<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是一个容器组件,它本身没有固定的宽度,因此我们需要使用一个CSS变量来定义El-table的宽度。我们可以在CSS文件中定义一个名为"$table-container-width"的变量,并将其设置为一个固定的值,例如"1000px"。 接下来,我们需要设置El-table的自适应列宽选项。El-table提供了以下两个选项来实现自适应列宽: 1...
el-table的el-table-column如果不指定width的话,会自动设定一个宽度,表格内容会自动换行,对强迫症用户来说非常不友好,为了追求完美用户体验,所以这里需要实现两个效果: 强制表格内容不换行显示 实现表格列宽自适应撑开 【代码实现】 <template> <el-table
通过插件v-fit-columns即可实现,列宽自适应。 安装插件 npm install v-fit-columns --save 引入 importVuefrom'vue';importPluginfrom'v-fit-columns';Vue.use(Plugin); 使用示例: <el-table v-fit-columns><el-table-columnlabel="No."type="index"class-name="leave-alone"></el-table-column><el-tabl...
由于表头和列是分开渲染的,通过el-table 设置fit属性,只能撑开表头,但是没有办法根据列的内容去适应宽度。网上找了一些使用根据表格内容计算表头宽度的文章,记个笔记。 代码逻辑是通过vue 的watch 监控表格的数据data,计算每列的内容和表头的最大宽度,计算的时候把表格内容使用span标签包裹,然后计算span标签的宽度width...
<el-table-column>设置的width都等于各自列的最大值即可 这个方案按理说,会发生表格闪烁,因为先渲染,又调整列宽的缘故。为了解决这个问题,我想到了visibility: hidden;,当hidden时,表格依然会渲染,只不过不显示,此时就可以计算各种宽度,等计算好,赋值好,再visible即可。
Element UI 表格【列宽自适应】 <template> <div class="page"> <el-table border style="width: 100%" :data="tableData"> <el-table-column v-for="(item, index) in tableTitleList" :key="index" :label="item.label" :type="item.type"...
最后用af-table-column解决 在el-table中使用 1)安装 npm install af-table-column 2)在main.js中引用 importVuefrom'vue'importElementUIfrom'element-ui'//需要按需引入,先引入vue并引入element-uiimportAFTableColumnfrom'af-table-column'Vue.use(AFTableColumn) ...