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 和 ...
随机推荐
- MP4转mp3
python实现: 依赖: glob,pydub "Couldn't find ffmpeg or avconv - defaulting to ffmpeg, but may not wo ...
- 2019 ICPC南京网络赛 F题 Greedy Sequence(贪心+递推)
计蒜客题目链接:https://nanti.jisuanke.com/t/41303 题目:给你一个序列a,你可以从其中选取元素,构建n个串,每个串的长度为n,构造的si串要满足以下条件, 1. si ...
- appium---切换webview时报错
在上一篇中简单介绍了如何查看webview和切换到webview的方法,可能第一次切换webview的时候会报错“Error: session not created exception: Chrom ...
- React的React.createContext()源码解析(四)
一.产生context原因 从父组件直接传值到孙子组件,而不必一层一层的通过props进行传值,相比较以前的那种传值更加的方便.简介. 二.context的两种实现方式 1.老版本(React16.x ...
- 多表连接面试题:ERROR:Not unique table/alias
class_info id class_name 2 s204 5 s205 1 s207 7 s203 match_info id host_id guest_id match_time mat ...
- django template 模板
九.Template模板 Template 模板是根据view传过来数据在html展示的功能,典型python 模板jinjia2库提供丰富的上下文展示func 创建template位置在项目下与ap ...
- 清空表单 autocomplete="off"
清空表单 autocomplete="off" <form action="/sm/baziqiming.aspx" method="post& ...
- TD tree体验
在体验了学长们设计的app后,我颇有感触,我们也可以凭借自己的力量来开发一款软件,虽然它可能并不如市面上相同类型的那么完美,但它对我们的意义却是不一样的. 我是在下午的见面会上看到的这款软件,接待的学 ...
- 页面布局 Paddiing Row Column Expanded 组件详解
一.Paddiing 组件 padding EdgeInsetss 设置填充的值 child 组件 return Padding( padding: EdgeIn ...
- Educational Codeforces Round 75 (Rated for Div. 2)D(二分)
#define HAVE_STRUCT_TIMESPEC#include<bits/stdc++.h>using namespace std;pair<int,int>a[20 ...