elementUI中table表格对列数组的处理方式
**elementUI中table表格对于每一列数据的处理**在vue中,我所采用的组件为elementUI具体详情可参考官网https://element.eleme.cn/#/zh-CN/component/tag后端码农一枚,因公司有需求所以暂时顶替写页面。废话不多说,直接上情景:公司有业务需要查询数据,需要在table表格中对某一列的数据做处理:后端接口返回的基本数据...
**
elementUI中table表格对于每一列数据的处理
**
在vue中,我所采用的组件为elementUI
具体详情可参考官网 https://element.eleme.cn/#/zh-CN/component/tag
后端码农一枚,因公司有需求所以暂时顶替写页面。废话不多说,直接上情景:
公司有业务需要查询数据,需要在table表格中对某一列的数据做处理:
后端接口返回的基本数据格式为一个下列对象的数组:
obj:{
aaa:123,
bbb:456,
ccc:789,
…
xxx:[
ddd:yyyy:MM:dd HH:mm:ss 回到家中
eee:…
]
}
elementUI官方文档中提供了表格的处理方式:每一列的中prop属性决定,可以自动的将拿到的数据数组遍历并呈现出来,
如图所示:
但是在上述所示的obj对象中,有一个键值对以数组类型存在的
在初期的表格搭建中发现了,如果不对那一列做处理的话,
展示出来就是这样的:
|——————————————————— |
| 1900:12:01 12:12:12 ****,1900:01:02 1 |
| 2:12:12 ****, … |
|——————————————————— |
找不到图啦,给大家粗略的画一下- -
这样肯定是不对的!
前后尝试遍历每一个xxx数组中的元素加换行符来实现换行,发现加上了
:formatter=“xxxMethod”
还是不行
最后找来找去
最终把处理方式改动成为了,在那一格中插入html
formatterColumn(cellValue) {
let value = cellValue.join( ‘
’ )
console.log(value)
return value
}
join里面加的是换行符
这样一来就可以正常显示,每一条都换行实现换行的效果
在以下链接中得到的启发:
https://blog.csdn.net/greekmrzzj/article/details/79476752
感谢大哥,头一次分享自己的经历,不喜勿喷出门右上角
更多推荐
所有评论(0)