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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/403262.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DataGridView控件中显示图片及其注意事项 【z】

windows Forms编程里面有一个DataGridView控件&#xff0c;它不光是可以显示数据&#xff0c;可以显示按钮&#xff0c;复选框&#xff0c;甚至还可以显示图片。这些图片可以来自于数据库&#xff08;用二进制的方式存储的&#xff09;&#xff0c;也可以来自文件系统。下面是一…

在winform上内嵌入其它的程序

这段代码很有意义,用于把一个程序的界面嵌入到我们自己程序的某个指定窗体上. 比如在某个项目里,我需要把基恩士的激光扫描轮廓显示给客户看,但是激光的DLL中并没有这种功能提供. 于是我想先启动激光的官方程序用以显示轮廓, 然后再把这种显示界面嵌入到我自己程序的界面上指定…

SPI总线时序

SPI&#xff0c;是一种高速的&#xff0c;全双工&#xff0c;同步的通信总线&#xff0c;并且在芯片的管脚上只占用四根线&#xff0c;节约了芯片的管脚&#xff0c;同时为PCB的布局上节省空间&#xff0c;提供方便&#xff0c;正是出于这种简单易用的特性&#xff0c;现在越来…

js计算浮点数出现小数;解决js计算小数问题;js数组相加出现小数;

原博1 原博2 方案1和方案2都是有效的 注意参数一定要是数字 而不能是字符串 否则会计算错误 情景&#xff1a; 在计算浮点数时候&#xff0c;出现多余小数。 例如&#xff1a; 1.11 1 2.1100000000000003 为什么计算小数会出现误差&#xff1f; 浮点数值的最高进度是17位…

VMware安装系统时没有弹出分区设置

在安装虚拟机系统的时候&#xff0c;有时候会遇到在安装一些镜像时没有弹出分区设置的画面&#xff0c;比如&#xff0c;我在使用 VMware 安装 CentOS 的时候&#xff0c;在选择完镜像&#xff0c;设置好启动安装的时候系统自动为我划分了 3 个分区&#xff1a;/boot、/、swap分…

如何在postgresql中模拟oracle的dual表,来测试数据库最基本的连接功能?

还好&#xff0c;网上弄到的&#xff0c;&#xff0c;没有dual的数据库&#xff0c;可以试图用select函数不带from数据表的方式来实现返回值。 一段测试代码&#xff1a; try:conn psycopg2.connect(databasedb.service_name, userdb.username, passwordpassword, hostdb.ip, …

vue+element实现树状表格的增删改查;使用el-table树形数据与懒加载实现树状表格增删改查

以下代码可以直接复制使用 一、情景&#xff1a; 列表是一个树状表格&#xff0c;可以无限添加下级&#xff0c;以及对列表的某一行进行增删改查&#xff08;目前查没有写&#xff09;。 原博链接 二、本篇是在原博主的代码基础上添加了部分功能。 功能1&#xff1a; 给树状表格…

ISCSI 1-由零开始

iSCSI的概念 iSCSI&#xff0c;即Internet SCSI&#xff0c;是IETF制订的一项标准&#xff0c;用于将SCSI数据块映射为以太网数据包。从根本上说&#xff0c;它是一种基于IP Storage理论的新型存储技术&#xff0c;该技术将存储行业广泛应用的SCSI接口技术与IP网络技术相结合&a…

存储技术与iSCSI

本章主要介绍基于IP SAN的网络存储iSCSI。iSCSI技术以其低廉的构建成本和优秀的存储性能&#xff0c;博得了很多CIO和存储管理员的喜爱&#xff0c;目前陆续进入企业应用领域&#xff0c;推动了企业的存储环境向集中式转变。虽然&#xff0c;目前对于iSCSI应该在什么样的环境中…

lvs和HA的高可用性

Heartbeat实现Lvs高可用和HA高可用效果图如下1、heartbeat的介绍Heartbeat 项目是 Linux-HA 工程的一个组成部分&#xff0c;它实现了一个高可用集群系统。心跳服务和集群通信是高可用集群的两个关键组件&#xff0c;在 Heartbeat 项目里&#xff0c;由 heartbeat 模块实现了这…

输入框限制只能输入数字,正数、负数、0,最多两位小数;数字输入框可以输入负数,并最多保留两位小数;el-number-input去掉四舍五入和自动补齐小数;

场景&#xff1a; –要求1&#xff1a;输入框只能输入数字&#xff0c;可以使正数、负数、0&#xff0c;小数点最多保留两位。 –要求2&#xff1a;不需要自动补齐小数点&#xff0c;也不需要自动四舍五入。 element-ui的数字输入框el-input-number只能满足要求1&#xff0c;所…

【工具】Win 7/8/10 下使用 VC++6.0

Microsoft Visual C&#xff08;也就是 MSVC或者VC&#xff09;&#xff0c;是大部分计算机专业学生接触的第一款编译器。它具有轻量&#xff0c;界面简洁等优点&#xff0c;也是许多计算机考试的指定工具。VC6.0已经推出近20年&#xff0c;仍旧深受许多编程人员的喜爱&#xf…

【maven3学习之一】window7下maven环境搭建

2019独角兽企业重金招聘Python工程师标准>>> 软件准备&#xff1a; jdk-7u10-windows-i586 apache-maven-3.0.4-bin maven介绍&#xff1a; 按照一般的套路老说应该要说明一下maven&#xff0c;觉得maven就是一个项目管理的框架&#xff0c;因为之前的一个项目对mav…

解决去除“请输入有效值。两个最接近的有效值分别为1和2“提示

场景&#xff1a;el-input输入框&#xff0c;hover上去会有"请输入有效值。两个最接近的有效值分别为1和2"提示。 只需要给el-input加上属性 :step“0.01” 即可&#xff0c;注意精确度与你的小数点位数有关。也就是说如果你是三位小数点&#xff0c;那就是:step“0.…

【贪心】Vijos P1615 旅行

题目链接&#xff1a; https://vijos.org/p/1615 题目大意&#xff1a; N条路&#xff0c;路的高度给你&#xff0c;走一条路的耗费体力是从上一条路的高度到当前路高度的绝对值差。 可以改变一条路的高度&#xff0c;耗费的体力等于改变前后的路高度差。求最小耗费体力。 题目…

向 Web 开发人员推荐35款 JavaScript 图形图表库

From: http://www.cnblogs.com/lhb25/p/35-javascript-chart-and-graph-libraries.html 图表是数据图形化的表示&#xff0c;通过形象的图表来展示数据&#xff0c;比如条形图&#xff0c;折线图&#xff0c;饼图等等。可视化图表可以帮助开发者更容易理解复杂的数据&#xff…

解决列表某项文字过度过多 需要自适应撑开高度展示 其他项目按照行高居中

解决列表某项文字过度过多 需要自适应撑开高度展示 其他项目按照行高居中 以下代码可直接复制&#xff1a; 两种方法&#xff1a;分别是方法1&#xff1a;bfc配合浮动撑高 其他项目子绝父相 方法二&#xff1a;第一项也是相对定位&#xff08;不推荐&#xff09; <templat…

uni-app更新某个组件版本;uni-app更新插件版本;uni-app更新uni_modules插件;uni-app小程序更新某一个组件的版本库

uni-app官方介绍的更新某一个组件的uni_modules方法 注意&#xff1a;本篇只是记录更新uni-app的组件库下某一个组件的版本。不是更新微信小程序版本。 场景原因&#xff1a;项目最初是去年开发的&#xff0c;当时下载了uni-app的自带组件库。但是时间筛选器uni-datetime-picke…

课文《小站》

小站 --作者&#xff1a;袁鹰 这是一个铁路线上的小站&#xff0c;只有慢车才停两三分钟。快车疾驰而过&#xff0c;旅客们甚至连站名还来不及看清楚。 就在这一刹那&#xff0c;你也许看到一间红瓦灰墙的小屋&#xff0c;一排漆成白色的小栅栏&#xff0c;或者还有三五个人影…

wordpress在新窗口打开留言者链接

为什么80%的码农都做不了架构师&#xff1f;>>> 没有什么技术含量可言&#xff0c;网上早有高手支招&#xff0c;但其方法在我现在使用的inove主题下不行&#xff0c;于是自己研究了下代码&#xff0c;完美解决&#xff0c;分享一下&#xff1a; 一般主题都可以这…