正常情况下,iview框架table表格内容只需配置好 key 就OK,

稍微复杂点就是用一个reder函数进行操作(params.row 为本行数据)

iview table表格内容为数组或者对象的子元素时问题讨论-LMLPHP

以上问题都很好解决,无需太动脑筋。

开发中遇到需求就是表格某一格内容不能直接获取,必须从数组中遍历出所有name,并且每个name配以唯一id,点击name时通过id跳转传参

后台返回数据如下

iview table表格内容为数组或者对象的子元素时问题讨论-LMLPHP

1、首先要把把name和id 进行拆分配对

function customStyleList(row){
var nameList=row.styleName.split(",")
var nameIDList=row.id.split(",")
var styleList=[]
for(let i=;i<nameList.length;i++){
arr={name:nameList[i],id:nameIDList[i]}
styleList.push(arr)
}
return styleList //此时组件一个有值数组
}
2、render 函数里循环 styleList 数组

iview table表格内容为数组或者对象的子元素时问题讨论-LMLPHP

OK完美解决

效果如下

iview table表格内容为数组或者对象的子元素时问题讨论-LMLPHP

参考iview官方IPA  https://www.iviewui.com/components/table

04-26 07:48