正常情况下,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. java基础(十一)之抽象类和抽象函数

    1.抽象函数的语法特征2.抽象类的语法特征3.抽象类的作用 抽象函数 只有函数的定义,没有函数体的函数被称为抽象函数: abstract void func(); 抽象类 使用abstract定义的类 ...

  2. 微信小程序 scroll-view 左右横向滑动没有效果(无法滑动)问题

    小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过),经调试发现: 1.scroll ...

  3. 通过maven 打docker 镜像包,出错ADD failed: stat /var/lib/docker/tmp/docker-builderXXXXXX: no such file or dir

    出现问题的原因很简单,没有maven打包生成jar包.

  4. Java compareTo的用法

    compareTo() 方法用于将 Number 对象与方法的参数进行比较.可用于比较 Byte, Long, Integer等. 该方法用于两个相同数据类型的比较,两个不同类型的数据不能用此方法来比 ...

  5. redis集群(Sentinel)

    问题 Redis 主哨兵模式是如何保证高可用的 主要依赖主哨兵的发现故障和故障转移 概述 本文假设读者对redis 的主从复制已经进行了了解 . Redis 主哨兵集群为Redis 提供了高可用,即高 ...

  6. Go递归函数

    package main import "fmt" func main() { /* 递归函数(recursion):一个函数自己调用自己,就叫做递归函数. 递归函数要有一个出口, ...

  7. 使用ltp4j碰到Can't find dependent libraries报错信息的问题解决

    项目中使用了哈工大的自然语言处理模块ltp4j,使用idea工具集成到项目中之后,在本机运行没有问题,一切正常.打成war包,部署到服务器上,使用的时候报错Can't find dependent l ...

  8. Java_Habse_shell

    import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.*; import org.apache.had ...

  9. 会话技术之Cookie

    在无状态的客户端(未登录)下,张三想买手机然后把手机加入购物车,服务器发出添加成功的响应,然后把手机加入ServletContext域里,然后张三想在逛逛别的, 再无状态的客户端(未登录)下,李四想买 ...

  10. [踩坑记录] windows10 应用商店打不开 代码: 0x80131500

    在某博客看到的方法,供参考,可以尝试一下,我的也是这么解决的1.打开“运行”输入 inetcpl.cpl (“WINDOWS”+“R”键,输入 inetcpl.cpl亦可)2.点开高级往下拉,勾上&q ...