在用vue+iview做的一个项目中,后台给我返回一个名称和费用拼接的字符串,我在iview的表格中显示出来,并且要让折行显示或者是加四个空格显示。发现后台给我加上的空格在前端根本显示不出来,还得自己处理。
效果图:
后台返回数据:
typeList: " 图文咨询 (0.01) 视频会诊 (0.02)"
解决思路:
拿到后台给的属性,先把把字符串用空格分隔成数组,取到自己想要的东西,然后再拼接上多个空格 或者是<br/>。再把处理好的属性,用v-html类似于dom渲染的方法放回到表格中。
示例:
{
title: '开放的会诊类型和费用',
key: 'typeList',
render: (h, params) => {
let enable = ''
let arr = params.row.typeList.split(' ') // 用空格分隔成数组
if (arr[6]) { // 判断如果有第二项就用换行符拼接,只返回第一项
enable = arr[1] + arr[3] + '<br/>' + arr[6] + arr[8]
} else {
enable = arr[1] + arr[3]
}
// 在iview的表格render函数中给v-html赋值
return h('div', {
domProps: {
innerHTML: enable
}
})
}
}