iview table表格内容为数组或者对象的子元素时问题讨论
正常情况下,iview框架table表格内容只需配置好 key 就OK,
稍微复杂点就是用一个reder函数进行操作(params.row 为本行数据)

。
以上问题都很好解决,无需太动脑筋。
开发中遇到需求就是表格某一格内容不能直接获取,必须从数组中遍历出所有name,并且每个name配以唯一id,点击name时通过id跳转传参
后台返回数据如下

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 数组

OK完美解决
效果如下

参考iview官方IPA https://www.iviewui.com/components/table
iview table表格内容为数组或者对象的子元素时问题讨论的更多相关文章
- 使用 iview Table 表格组件修改操作的显示隐藏
使用 iview Table 表格组件修改操作的显示隐藏,如下图 1.如何设置 table 操作按后台传入的状态值去渲染 不同的按钮? 解决方法 我们在vue2中,动态渲染html 使用的是 retu ...
- ret.data[0]._highlight = true iview table表格高亮
ret.data[0]._highlight = true iview table表格高亮
- js和jquery获取当前对象的子元素
开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...
- table表格内容溢出处理
直接在table标签加上 style="table-layout:fixed;word-wrap:break-word;"
- LayUI table表格控件 如何显示 对象中的属性(针对Mybatis的级联查询--一对一情况)
1.entity如下: 2.Mybatis的Mapper.xml文件如下 <resultMap id="BaseResultMapPlus" type="dicIt ...
- iview Table表格单选框互斥
表格中添加单选框,并且互斥 首先带data中定义 currentid : 0 :表示默认不选中 { title: "名称", key: "name", re ...
- 用echartsjs 实现散点图与table表格双向交互,以及实现echarts取自于table数据,和自定义echarts提示内容
本人研究echarts已经有一段时间了,今天就分享几个关于echarts的小技巧.虽然看起来简单,但做起来却很繁琐,不过实用性倒是很好. 在一个大的页面中,左边为table表格,右边为echarts的 ...
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
先上代码 <script type="text/javascript" language="javascript"> var idTmr; ...
- vue+iview中的table表格导出excel表格
一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...
随机推荐
- mysql忘记密码,更改密码
对MySQL有研究的读者,可能会发现MySQL更新很快,在安装方式上,MySQL提供了两种经典安装方式:解压式和一键式,虽然是两种安装方式,但我更提倡选择解压式安装,不仅快,还干净.在操作系统上,My ...
- flutter web 配置环境及运行(windows)
此下 操作 都是基于 windows 一, 将镜像添加到 用户环境变量中 由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用 ...
- JS高级---面向对象的编程思想(贪吃蛇梳理)
面向对象的编程思想(贪吃蛇梳理) 模拟贪吃蛇游戏,做的项目 地图: 宽,高,背景颜色,因为小蛇和食物都是相对于地图显示的, 这里小蛇和食物都是地图的子元素, 随机位置显示, 脱离文档流的, 地图也需要 ...
- The Reason Why Cosmetic Airless Bottles Are Widely Used
The contents of the Cosmetic Airless Bottles can be isolated from the air, to prevent the product ...
- 线性递推BM模板
#include <cstdio> #include<iostream> #include <cstring> #include <cmath> #in ...
- 国际化支持、activity生命周期、屏幕翻转的ui适配
国际化 对于手机的不同语言做出不同的语言描述,这里只是简单的提一下,实际上针对比较大型的项目,有可能不同的语言要做不同的ui适配. 例如下面:中文长度不长但是在德语中占据很长的位置,这个就要针对性的适 ...
- 数据库持久化框架——MyBatis(1)
叨叨时刻:内容根据阿里云大学的MyBatis视频教程整理而成,有需要最好跟着视频教程走一遍 MyBatis 是支持定制化SQL.存储过程以及高级映射的优秀的持久层框架.MyBatis 避免了几乎所有的 ...
- 读书笔记 - 把时间当作朋友 by 李笑来
要管理的不是时间,而是自己. 摸着石头渐行渐远,最终也能过河.- 朱敏 赛伯乐(中国)投资公司 董事长 一切都靠积累,一切都可提前准备,越早醒悟越好.人的一生是奋斗的一生,但是有的人一生过得很伟大,有 ...
- HDU 1237 简单计算器(栈+stringstream)
提供几份代码,这题的输入可以用stringsteam处理,先处理乘除后处理加减,正常思路,但是后面统计加减法的时候,对栈的运用错了,我用的时候相当于给它多加了几个括号就错了. 正确的简单解法就是,加法 ...
- 入门chrome插件开发教程和经验总结,一篇就搞掂!
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_44244857/articl ...