table表格列宽动态调整方案

在做表格的时候，设置好的列宽却因为数据太长导致换行，想让它自己调整宽度，但是现在elementUI组件好像还没有这个功能。所以自己写了一个方法实现它。

一个动态改变表格列宽的方法

该方法实现了自适应列内容长度不换行，另外改变字体大小也会改变列宽，也实现了自适应字体大小列宽调整。
这个方法的思路是将列数据拆成单个字母或者单个中文字或其他单个符号放入数组中，对不同类型设置不同宽度，接着算出所有列数据的宽度，取最大宽度的一个设置为表格列宽。

自动调节表格列宽：flexColumnWidth ，返回值为宽度值，只有数字没有单位

title：表列名（例：‘名字’，‘性别’，‘手机号码’）

tableData:表格数据

str：字段名（例：tableData[0].name 中的’name’， tableData[0].phone，的’phone’，

currentfontsz：当前字体尺寸（填数字就好）

sizetype：字体尺寸的单位（是px还是rem）

flexColumnWidth(title,str,tableData,currentfontsz,sizetype,flag = "max") {//可能tableData里面的是个object对象，把它里面的name取出来替换它,传参时只需传对象名就好了。if (tableData == null) return;let tb = JSON.parse(JSON.stringify(tableData));for (let i = 0; i < tb.length; i++) {if (typeof tb[i][str] == "object") {tb[i][str] = tb[i][str].name;}}//外部字体尺寸变化的时候，这里进行了适配，以求宽度会随着字体尺寸变化而动态调整let flexperson;if (sizetype == "rem") {let basesize = document.documentElement.style.fontSize;flexperson =(Number(basesize.slice(0, basesize.length - 2)) * currentfontsz) / 14;} else if (sizetype == "px") {flexperson = currentfontsz / 14;}console.log(flexperson);str = str + "";let columnContent = "";if (!tb || !tb.length || tb.length === 0 || tb === undefined) {return;}if (!str || !str.length || str.length === 0 || str === undefined) {return;}if (flag === "equal") {// 获取该列中第一个不为空的数据(内容)for (let i = 0; i < tb.length; i++) {if (tb[i][str].length > 0) {// console.log('该列数据[0]:', tableData[0][str])columnContent = tb[i][str];break;}}} else {// 获取该列中最长的数据(内容)let index = 0;for (let i = 0; i < tb.length; i++) {if (tb[i][str] === null) {tb[i][str] = "";}const now_temp = tb[i][str] + "";const max_temp = tb[index][str] + "";if (now_temp.length > max_temp.length) {index = i;}}//表头标题的长度可能比值还长，这时就用表头长度作为基础设计列宽。columnContent =tb[index][str].length > title.length ? tb[index][str] : title;}columnContent += "";console.log(columnContent);let co = columnContent.split("");// console.log('该列数据[i]:', columnContent)// 以下分配的单位长度可根据实际需求进行调整let flexWidth = 20;for (const char of columnContent) {if ((char >= "A" && char <= "Z") || (char >= "a" && char <= "z")) {// 如果是英文字符，为字符分配8个单位宽度flexWidth += 9;} else if (char >= "\u4e00" && char <= "\u9fa5") {// 如果是中文字符，为字符分配15个单位宽度flexWidth += 18;} else {// 其他种类字符，为字符分配8个单位宽度flexWidth += 9;}}if (flexWidth < 65) {// 设置最小宽度flexWidth = 65;}// if (flexWidth > 300) {//   // 设置最大宽度//   flexWidth = 300// }return flexWidth * flexperson;}

使用方式

这里使用的是elementUI,别的ui组件需要表格列下的width属性也能动态赋值才能下面那样写。先把这个函数引入到能调用到的地方，例放到vue组件methods: {}对象里。使用的话就是给width，把那些必要参数填上就行。参数不多啊。

<el-table :data="tdata" style="font-size:12px"><el-table-columnprop="conversionTime"align="left":width="flexColumnWidth('转正日期', 'conversionTime', tdata, 12, 'px')"label="转正日期"></el-table-column>
</el-table>

table表格列宽动态调整方案相关推荐

html表格宽度拖拽,原生js实现拖拽改变 table表格列宽
table 员工编号试用时间转正时间性别姓名拼音生日时间民族身高 vh20180421 2018-3-13 2018-6-13 1 LDH 1988-3-13 汉族 178 vh2018 ...
【java基础知识】设置表格内容居中显示，表格字体大小调整，表格列宽调整
一.表格内容居中显示通过Netbeans创建表格后,默认表头和表格内容全部偏左显示,想要手动修改,需要先将自动创建的表格类改为public类型. 然后在表格代码部分后面添加下面代码: 1.表头居中显 ...
html表格宽度拖拽,Js拖拽实现改变Table的列宽解决方案
Js拖拽实现改变Table的列宽如题,楼主是Js小白,最近遇到问题,需要用Js实现GridView的列拖拽改变大小,在网上找到一段代码如下: function MouseDownToResize(o ...
php表格列宽拖拽,JavaScript_JQuery拖动表头边框线调整表格列宽效果代码，类似于桌面程序中的表格拖动 - phpStudy...
JQuery拖动表头边框线调整表格列宽效果代码类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放 ...
计算机excel中行高在哪里,电脑Excel表格怎么对行高和列宽进行调整
电脑Excel表格怎么对行高和列宽进行调整腾讯视频/爱奇艺/优酷/外卖充值4折起在我们使用Excel表格处理数据的时候,我们经常需要调整行高和列宽,今天小编就告诉大家电脑Excel表格怎么对行高 ...
计算机考试行高怎么设置,2017年职称计算机考试WPS教程：表格行高列宽的调整...
2017年职称计算机考试WPS教程:表格行高列宽的调整导语:在WPS教程中的表格行高列宽的调整是怎样的呢?下面我么一起来看看相关的具体操作是怎样的吧.更多相关内容请上应届毕业生考试网查询. 表格行高 ...
计算机做表格的行高和列宽,表格中列和行的插入与删除及行高和列宽的调整——想象力电脑应用...
大多数数据输入到工作表后都需要进行管理和格式设置,以获得更好的显示效果,也便于分辨各类型的数据.这里我们将介绍行或列的插入与删除和行高和列宽的调整. 一.行或列的插入与删除在输入数据时,如果遗漏了某 ...
HTML 锁定表格首行首列、拖拽表格列宽
摘自:http://s.yanghao.org/program/viewdetail.php?i=61717 因为与自己的实际情况有些不同,简单的改造了下...如果有版权问题,请留言... 锁定Tab ...
Antd Table组件列宽的一些疑惑
前言前些年参与的几个项目,前端部分主要采用Vue+ElementUI进行开发.最近参与的项目,前端部分大胆的转向了React+Antd. 疑惑在之前的Vue+ElementUI项目里,Table组 ...

table表格列宽动态调整方案

一个动态改变表格列宽的方法

使用方式

table表格列宽动态调整方案相关推荐

最新文章

热门文章