el-table自动充满,且无滚动条;el-table某列的列宽自适应,其他列按比例分配。

2024-01-30 20:50

本文主要是介绍el-table自动充满,且无滚动条;el-table某列的列宽自适应,其他列按比例分配。,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

情景一:例如首列按照内容自适应展开,其余列有各自的比例。这样设置,就不会出现滚动条。
注意点:

  • 给需要自适应展开的列加 :width="flexColumnWidth"计算方法 就可以自适应展开
  • 需要给余下所有的列都设置 width=“auto” min-width=“10%” 比例 比例可以不一样
  • 余下的列会按照自己比例和其他列比例 进行对比 然后分配余下的宽度,就不会出现滚动条
  • 如果不给余下列设置比例 那么余下所有列会自动适应相同比例 超出列表宽度会有滚动条
    在这里插入图片描述

情景二:这是不设置比例的 余下列会平分宽度
在这里插入图片描述

以下代码可以直接复制使用:
这是给余下列设置了比例的代码

<template><div style="width:1000px;"><el-table border :data="tableData" fit style="width: 100%"><!-- :width="flexColumnWidth('string',tableData)" --><el-table-column label="文字" :width="flexColumnWidth('string',tableData)"><template slot-scope="scope"><el-input v-model="scope.row.string"></el-input></template></el-table-column><el-table-column prop="name" label="姓名" width="auto" min-width="20%"></el-table-column><el-table-column prop="a" label="a" width="auto" min-width="10%"></el-table-column><el-table-column prop="b" label="b" width="auto" min-width="10%"></el-table-column><el-table-column prop="c" label="c" width="auto" min-width="10%"></el-table-column><el-table-column prop="d" label="d" width="auto" min-width="10%"></el-table-column><el-table-column prop="e" label="e" width="auto" min-width="5%"></el-table-column><el-table-column prop="f" label="f" width="auto" min-width="5%"></el-table-column><el-table-column prop="address" label="地址" width="auto" min-width="20%"></el-table-column></el-table></div>
</template><script>export default {data () {return {tableData: [{string: '20%', name: '20%', a: '10%', b: '10%', c: '10%', d: '10%', e: '5%', f: '5%', address: '20%'},{string: '一二三四五六七八九十', name: '王小虎', a: '12', b: '211', c: '111', d: '1', e: 11, f: '122', address: '上海市普陀区金沙江路 1517 弄'},{string: '条件他又长又短的的女分的看到偶尔偶尔饿哦偶尔分佛开口分配佛分富婆看哦考配哦', name: '王小虎', a: '111111', b: '211', c: '111', d: '1', e: 11, f: '122', address: '上海市普陀区金沙江路 1519 弄'},{string: '条件他又长又看到配佛分富婆看哦考配哦', name: '王小虎', a: '12', b: '211', c: '111', d: '1', e: 11, f: '122', address: '123456789'}]}},methods: {// 自适应表格列宽flexColumnWidth (str, arr1, flag = 'max') {console.log(str)// str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);// flag为可选值,可不传该参数,传参时可选'max'或'equal',默认为'max'// flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。str = str + ''let columnContent = ''if (!arr1 || !arr1.length || arr1.length === 0 || arr1 === undefined) {return '80px' // 给个默认的}if (!str || !str.length || str.length === 0 || str === undefined) {return '80px' // 给个默认的}if (flag === 'equal') {// 获取该列中第一个不为空的数据(内容)for (let i = 0; i < arr1.length; i++) {if (arr1[i][str].length > 0) {// console.log('该列数据[0]:', arr1[0][str])columnContent = arr1[i][str]break}}} else {// 获取该列中最长的数据(内容)let index = 0for (let i = 0; i < arr1.length; i++) {if (arr1[i][str] === null) {return}const now_temp = arr1[i][str] + ''const max_temp = arr1[index][str] + ''if (now_temp.length > max_temp.length) {index = i}}columnContent = arr1[index][str]}// console.log('该列数据[i]:', columnContent)// 以下分配的单位长度可根据实际需求进行调整let flexWidth = 0for (const char of columnContent) {if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {// 如果是英文字符,为字符分配8个单位宽度flexWidth += 8} else if (char >= '\u4e00' && char <= '\u9fa5') {// 如果是中文字符,为字符分配15个单位宽度flexWidth += 15} else {// 其他种类字符,为字符分配8个单位宽度flexWidth += 8}}if (flexWidth < 80) {// 设置最小宽度flexWidth = 80}// if (flexWidth > 250) {//   // 设置最大宽度//   flexWidth = 250// }// 可以再多留部分的paddingflexWidth += 30return flexWidth + 'px'}}
}
</script>

这篇关于el-table自动充满,且无滚动条;el-table某列的列宽自适应,其他列按比例分配。的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/661509

相关文章

JAVA实现Token自动续期机制的示例代码

《JAVA实现Token自动续期机制的示例代码》本文主要介绍了JAVA实现Token自动续期机制的示例代码,通过动态调整会话生命周期平衡安全性与用户体验,解决固定有效期Token带来的风险与不便,感兴... 目录1. 固定有效期Token的内在局限性2. 自动续期机制:兼顾安全与体验的解决方案3. 总结PS

linux部署NFS和autofs自动挂载实现过程

《linux部署NFS和autofs自动挂载实现过程》文章介绍了NFS(网络文件系统)和Autofs的原理与配置,NFS通过RPC实现跨系统文件共享,需配置/etc/exports和nfs.conf,... 目录(一)NFS1. 什么是NFS2.NFS守护进程3.RPC服务4. 原理5. 部署5.1安装NF

MyBatis Plus实现时间字段自动填充的完整方案

《MyBatisPlus实现时间字段自动填充的完整方案》在日常开发中,我们经常需要记录数据的创建时间和更新时间,传统的做法是在每次插入或更新操作时手动设置这些时间字段,这种方式不仅繁琐,还容易遗漏,... 目录前言解决目标技术栈实现步骤1. 实体类注解配置2. 创建元数据处理器3. 服务层代码优化填充机制详

深入浅出Spring中的@Autowired自动注入的工作原理及实践应用

《深入浅出Spring中的@Autowired自动注入的工作原理及实践应用》在Spring框架的学习旅程中,@Autowired无疑是一个高频出现却又让初学者头疼的注解,它看似简单,却蕴含着Sprin... 目录深入浅出Spring中的@Autowired:自动注入的奥秘什么是依赖注入?@Autowired

基于Redis自动过期的流处理暂停机制

《基于Redis自动过期的流处理暂停机制》基于Redis自动过期的流处理暂停机制是一种高效、可靠且易于实现的解决方案,防止延时过大的数据影响实时处理自动恢复处理,以避免积压的数据影响实时性,下面就来详... 目录核心思路代码实现1. 初始化Redis连接和键前缀2. 接收数据时检查暂停状态3. 检测到延时过

SpringBoot实现RSA+AES自动接口解密的实战指南

《SpringBoot实现RSA+AES自动接口解密的实战指南》在当今数据泄露频发的网络环境中,接口安全已成为开发者不可忽视的核心议题,RSA+AES混合加密方案因其安全性高、性能优越而被广泛采用,本... 目录一、项目依赖与环境准备1.1 Maven依赖配置1.2 密钥生成与配置二、加密工具类实现2.1

Python使用Tenacity一行代码实现自动重试详解

《Python使用Tenacity一行代码实现自动重试详解》tenacity是一个专为Python设计的通用重试库,它的核心理念就是用简单、清晰的方式,为任何可能失败的操作添加重试能力,下面我们就来看... 目录一切始于一个简单的 API 调用Tenacity 入门:一行代码实现优雅重试精细控制:让重试按我

SQL Server跟踪自动统计信息更新实战指南

《SQLServer跟踪自动统计信息更新实战指南》本文详解SQLServer自动统计信息更新的跟踪方法,推荐使用扩展事件实时捕获更新操作及详细信息,同时结合系统视图快速检查统计信息状态,重点强调修... 目录SQL Server 如何跟踪自动统计信息更新:深入解析与实战指南 核心跟踪方法1️⃣ 利用系统目录

Spring Security 单点登录与自动登录机制的实现原理

《SpringSecurity单点登录与自动登录机制的实现原理》本文探讨SpringSecurity实现单点登录(SSO)与自动登录机制,涵盖JWT跨系统认证、RememberMe持久化Token... 目录一、核心概念解析1.1 单点登录(SSO)1.2 自动登录(Remember Me)二、代码分析三、

MySQL CTE (Common Table Expressions)示例全解析

《MySQLCTE(CommonTableExpressions)示例全解析》MySQL8.0引入CTE,支持递归查询,可创建临时命名结果集,提升复杂查询的可读性与维护性,适用于层次结构数据处... 目录基本语法CTE 主要特点非递归 CTE简单 CTE 示例多 CTE 示例递归 CTE基本递归 CTE 结