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
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值