正常情况下,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表格内容为数组或者对象的子元素时问题讨论的更多相关文章

  1. 使用 iview Table 表格组件修改操作的显示隐藏

    使用 iview Table 表格组件修改操作的显示隐藏,如下图 1.如何设置 table 操作按后台传入的状态值去渲染 不同的按钮? 解决方法 我们在vue2中,动态渲染html 使用的是 retu ...

  2. ret.data[0]._highlight = true iview table表格高亮

    ret.data[0]._highlight = true iview table表格高亮

  3. js和jquery获取当前对象的子元素

    开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...

  4. table表格内容溢出处理

    直接在table标签加上  style="table-layout:fixed;word-wrap:break-word;"

  5. LayUI table表格控件 如何显示 对象中的属性(针对Mybatis的级联查询--一对一情况)

    1.entity如下: 2.Mybatis的Mapper.xml文件如下 <resultMap id="BaseResultMapPlus" type="dicIt ...

  6. iview Table表格单选框互斥

    表格中添加单选框,并且互斥 首先带data中定义   currentid : 0 :表示默认不选中 { title: "名称", key: "name", re ...

  7. 用echartsjs 实现散点图与table表格双向交互,以及实现echarts取自于table数据,和自定义echarts提示内容

    本人研究echarts已经有一段时间了,今天就分享几个关于echarts的小技巧.虽然看起来简单,但做起来却很繁琐,不过实用性倒是很好. 在一个大的页面中,左边为table表格,右边为echarts的 ...

  8. 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; ...

  9. vue+iview中的table表格导出excel表格

    一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...

随机推荐

  1. MySQL性能优化---优化方案

    1.对查询进行优化,应尽量避免全表查询,首先考虑在where及order by涉及的列上建立索引: 2.应尽量避免where子句中对字段进行null值判断,否则将导致引擎放弃使用索引而进行全表扫描: ...

  2. SQLAlchemy -高级查询

    查询 # -*- coding: utf-8 -*-   from sqlalchemy.orm import sessionmaker   from SQLAlchemy.create import ...

  3. Text Infilling解读

    多头自注意力token解码器,该解码器能够对过去和未来的信息进行condition处理,适合填充任务:自注意力机制尤其适合填充文本,因为它可以为每个空白处从左到右及从右到左双向建模,为全部语义进行有效 ...

  4. 【Python】如何处理Excel中的数据

    我们平时在做自动化测试的时候,可能会涉及到从表格中去读取或者存储数据,我们除了可以使用openpyxl来操作excel,当然也可以利用pandas来完成,这篇随笔只是我在学习过程中的简单记录,其他的功 ...

  5. git和github的关系以及简单易懂的理解

    git和github的关系   写在前面:我身边好多人问我git和github的区别,想必对于好多人没学过的大佬们恐怕也是一脸懵逼,但是不知道也是不行的,所以我今天就来讲一讲这二者的区别和联系. 用一 ...

  6. 前端一面/面试常考题1-页面布局:假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应。

    题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. [题外话:日常宣读我的目标===想要成为一名优雅的程序媛] 一.分析 1. 题目真的像我们想得这么简单吗? 其实不然 ...

  7. Coursera-吴恩达机器学习课程笔记-Week2

    参考资料: 吴恩达教授机器学习课程 机器学习课程中文笔记 Week2 一. 多变量线性回归(Linear Regression with Multiple Variables) 多变量就时当一个exa ...

  8. Python函数基础进阶

    函数参数的另一种使用方式 def print_info(name,age): print("Name: %s" %name) print("age: %d" % ...

  9. vue基础笔记

    目录 Vue 渐进式 JavaScript 框架 一.走进Vue 二.Vue实例 三.生命周期钩子 四.Vue指令 五.组件 六.Vue-CLI 项目搭建 Vue 渐进式 JavaScript 框架 ...

  10. win server 挂载

    新建服务器角色,选择[NFS服务器]. mount -o nolock \\x.x.x.x.x.x\! z:/*链接到*/