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中