elementUI中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属性决定,可以自动的将拿到的数据数组遍历并呈现出来,

如图所示:
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

感谢大哥,头一次分享自己的经历,不喜勿喷出门右上角

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值