正常情况下,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. Python六剑客

    1.切片 切片:截取可迭代对象的部分内容(list,tuple,dict,set,str) 2.列表解析式 列表解析式可以快速的生成一个列表 不带if条件的: 格式:[expression for i ...

  2. 偏移分页器、游标分页器、Django-filter插件

    复习 """ 1.drf-jwt签发与校验源码 签发token的请求 - 登录请求 - ObtainJSONWebToken - post - 将账号密码丢给序列化类处理 ...

  3. echarts制作html和JavaScript的时钟和代码分析与注释

    1.效果图 2.说明: 2.1 代码是大神制作的,我进行修改,感谢大神,原创属于他. 2.2 我对代码进行分析.注释.整理,增加代码的可读性. 2.3 通过上述自己的工作,自己也能熟悉相关的JavaS ...

  4. argument

    js中arguments的用法   了解arguments这个对象之前先来认识一下javascript的一些功能: 其实Javascript并没有重载函数的功能,但是Arguments对象能够模拟重载 ...

  5. linux使用tree将目录结构写进txt

    比如把caffe的二级目录结构写进txt: tree -L > /home/wmz/treecaffe.txt 则会在/home/wmz/目录下生成一个名为treecaffe.txt的文件,文件 ...

  6. 微信小程序--缓存,支持过期时间的二次开发封装

    简介 微信小程序提供了缓存的api,包括同步和异步两种,具体api不多说明,可自行查看官方文档 现在微信小程序缓存api存在一个问题就是没有设定过期时间,下面给大家介绍一下对小程序缓存的二次封装,使其 ...

  7. Python - CentOS 下用 yum 安装 pip

    1. 概述 python 安装完成 发现后续需要一个 python 自己的 包管理工具 书上说默认会装, 然后我发现还是没有 命令执行的结果我就不给了, 这个判断起来, 应该是没有太大难度的 2. 环 ...

  8. Go函数高级

    1. 函数的数据类型 package main import "fmt" func main() { /* go语言的数据类型: 基本数据类型: int,float,bool,st ...

  9. 【C语言】写一个函数,并调用该函数求两个整数的最大公约数和最小公倍数

    程序分析: 在数学中,两个数的最小公倍数=两个数的乘积/两数的最大公约数. 求两个数的最大公约数,运用辗转相除法:已知两个整数M和N,假定M>N,则求M%N. 如果余数为0,则N即为所求:如果余 ...

  10. HBuilder笔记

    官网: https://uniapp.dcloud.io/quickstart HBuilderX - 高效极客技巧 https://ask.dcloud.net.cn/article/13191 插 ...