在列数比较多的情况,如果el-table宽度限定在容器内,单元格里的内容就会换行。强制不换行,内容要么在单元格内滚动,要么就会溢出或被截断。 产品想要的效果是:内容保持单行显示,列间距保持一致,表格超出容器允许水平滚动。el-table-column是支持设置固定宽度的,在内容宽度可预知的情况下,也能满足这个需求。问题就在于如...
<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 最小宽度 *...
根据项目的情况,调整到一个最合适的值// 调整操作列的宽度functionadjustColumnWidth(currPage=1){if(currPage===1){hash={}}constheaderTable=document.querySelector('.specificalTable .el-table__header-wrapper > .el-table__header')constnormalTableBody=document.querySelector('.specificalTable .el...
仔细检查代码后,发现列的宽度是固定的,把列的宽度设置成最小宽度就可以了 1<el-table-columnlabel="操作"fixed="right"width="150"align="center"class-name="small-padding fixed-width">2<templateslot-scope="scope">3<el-button4size="mini"5type="text"6icon="el-icon-edit"7@click="handleEdit(scop...
如果固定列宽后表格的布局出现问题(例如,某些列的内容被截断或溢出),你可能需要调整表格的样式或布局。例如,你可以为 el-table 或el-table-column 添加自定义样式,或者调整表格的 max-width 和min-width 属性。 通过以上步骤,你可以在 el-table 中轻松地固定某一列的宽度,以满足你的布局需求。如果你有任何其他问...
1.使用固定宽度 可以通过设置el-table-column的width属性来定义列的宽度,这将使得所有列都具有相同的宽度,无论内容的多少。例如: ```html <el-table :data="tableData"> <el-table-column prop="name" label="Name" width="100"></el-table-column> <el-table-column prop="age" label="Age" width=...
canvas动态计算el-table-column宽度,结合computed,优化计算性能 /** * 计算table每一列的宽度 * @param colLabel 每列title {workDate: '班组',userNo: '工号',date: '生产日期',isQ: '是否质检'} * @param tableData 表格数据 * @returns 列信息 {workDate: {label: '班组', width: 206},...} ...
></el-table-column> <el-table-column prop="age" label="Age" ></el-table-column> <!-- 其他列 --> </el-table> </template> <script> export default { data() { return { isDesktop: false }; }, beforeDestroy() { window.removeEventListener('resize', this.checkDeviceType); ...
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才能实现每一列的百分比配置 ...