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

相关文章

一文详解MySQL如何设置自动备份任务

《一文详解MySQL如何设置自动备份任务》设置自动备份任务可以确保你的数据库定期备份,防止数据丢失,下面我们就来详细介绍一下如何使用Bash脚本和Cron任务在Linux系统上设置MySQL数据库的自... 目录1. 编写备份脚本1.1 创建并编辑备份脚本1.2 给予脚本执行权限2. 设置 Cron 任务2

MyBatis Plus 中 update_time 字段自动填充失效的原因分析及解决方案(最新整理)

《MyBatisPlus中update_time字段自动填充失效的原因分析及解决方案(最新整理)》在使用MyBatisPlus时,通常我们会在数据库表中设置create_time和update... 目录前言一、问题现象二、原因分析三、总结:常见原因与解决方法对照表四、推荐写法前言在使用 MyBATis

Python使用smtplib库开发一个邮件自动发送工具

《Python使用smtplib库开发一个邮件自动发送工具》在现代软件开发中,自动化邮件发送是一个非常实用的功能,无论是系统通知、营销邮件、还是日常工作报告,Python的smtplib库都能帮助我们... 目录代码实现与知识点解析1. 导入必要的库2. 配置邮件服务器参数3. 创建邮件发送类4. 实现邮件

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

MySQL的ALTER TABLE命令的使用解读

《MySQL的ALTERTABLE命令的使用解读》:本文主要介绍MySQL的ALTERTABLE命令的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、查看所建表的编China编程码格式2、修改表的编码格式3、修改列队数据类型4、添加列5、修改列的位置5.1、把列

Python使用pynput模拟实现键盘自动输入工具

《Python使用pynput模拟实现键盘自动输入工具》在日常办公和软件开发中,我们经常需要处理大量重复的文本输入工作,所以本文就来和大家介绍一款使用Python的PyQt5库结合pynput键盘控制... 目录概述:当自动化遇上可视化功能全景图核心功能矩阵技术栈深度效果展示使用教程四步操作指南核心代码解析

SpringBoot实现文件记录日志及日志文件自动归档和压缩

《SpringBoot实现文件记录日志及日志文件自动归档和压缩》Logback是Java日志框架,通过Logger收集日志并经Appender输出至控制台、文件等,SpringBoot配置logbac... 目录1、什么是Logback2、SpringBoot实现文件记录日志,日志文件自动归档和压缩2.1、

SpringCloud使用Nacos 配置中心实现配置自动刷新功能使用

《SpringCloud使用Nacos配置中心实现配置自动刷新功能使用》SpringCloud项目中使用Nacos作为配置中心可以方便开发及运维人员随时查看配置信息,及配置共享,并且Nacos支持配... 目录前言一、Nacos中集中配置方式?二、使用步骤1.使用$Value 注解2.使用@Configur

Golang实现Redis分布式锁(Lua脚本+可重入+自动续期)

《Golang实现Redis分布式锁(Lua脚本+可重入+自动续期)》本文主要介绍了Golang分布式锁实现,采用Redis+Lua脚本确保原子性,持可重入和自动续期,用于防止超卖及重复下单,具有一定... 目录1 概念应用场景分布式锁必备特性2 思路分析宕机与过期防止误删keyLua保证原子性可重入锁自动

python利用backoff实现异常自动重试详解

《python利用backoff实现异常自动重试详解》backoff是一个用于实现重试机制的Python库,通过指数退避或其他策略自动重试失败的操作,下面小编就来和大家详细讲讲如何利用backoff实... 目录1. backoff 库简介2. on_exception 装饰器的原理2.1 核心逻辑2.2