element ui表格问题

element ui中的表格无法根据字符的长度完成自适应
解决办法:通常这个表格所需要的字符串是保存在一个数组中的各个对象中,做法很简单,new一个数组,遍历数组中的对象,把数组中对象中保存字符的属性push到新的数组中。使用reduce函数对新数组进行遍历,返回字符串最长的那个值。使用.length就可以取得字符的长度,再根据需求用字符的长度动态的绑定数据到值上

template:

<el-table-column prop="YBJYXM" label="经营范围" :width="300"></el-table-column>

vue:

//用于保存对象中的字段
Cwidth:[],
//用于保存最后的结果
currentWidth: ''

 //动态的决定表格的长度
 this.tableData2.forEach(e => {
   this.Cwidth.push(e.YBJYXM)
 })
 console.log(this.Cwidth)
 this.currentWidth = this.Cwidth.reduce((old,now)=>{
   return old.length > now.length ? old : now
 })
 console.log(this.currentWidth)  //最后最长的字符串保存再currentWidth中
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 8,455评论 0 4
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,114评论 0 3
  • 本章内容 使用对象 创建并操作数组 理解基本的 JavaScript 类型 使用基本类型和基本包装类型 引用类型的...
    闷油瓶小张阅读 3,926评论 0 0
  • 官网 中文版本 好的网站 Content-type: text/htmlBASH Section: User ...
    不排版阅读 9,947评论 0 5
  • 参考基础教程的整理,方便记忆 一、Object对象 (O大写) 所有其他对象都继承自这个对象。Object本身也是...
    Viaphlyn阅读 6,887评论 0 0