iview Table表格单选框互斥
表格中添加单选框,并且互斥

首先带data中定义 currentid : 0 ;表示默认不选中
{
title: "名称",
key: "name",
render: (h, params) => {
// console.log(params,'----------------params------------------') //为data中的值
let id = params.row.id;
let defaultS = false;
// console.log(this.currentid)
if (this.currentid == id) {
defaultS = true;
} else {
defaultS = false
}
let self = this;
return h('Radio', {
props: {
value: defaultS //判断单选框状态
},
on: {
'on-change': () => {
self.currentid = id; //赋值单选框id。对比id判断状态
}
}
}, params.row.cname)
},
},
render中使用for循环 ,, jsx中只能写表单式,不能写多行语句用map映射
render: (h, params) => {
let stat = (params.row.size/1024).toFixed(2);
let IPArr = params.row.diskSizes;
for(var i in IPArr){
(IPArr[i].capacityInKB/1024).toFixed(2);
};
console.log(IPArr)
return h("div", [
h(
"Tooltip",
{
props: {
transfer: true
}
},
[
stat,
IPArr.map(function (item,index) {
return h('div',{
slot: 'content',
style: {
whiteSpace: 'normal',
wordWrap: 'break-word'
}
}, [
h('p' , item.disk)
])
})
]
)
]);
}
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表格高亮
- iview table表格内容为数组或者对象的子元素时问题讨论
正常情况下,iview框架table表格内容只需配置好 key 就OK, 稍微复杂点就是用一个reder函数进行操作(params.row 为本行数据) . 以上问题都很好解决,无需太动脑筋. 开发中 ...
- element-ui 带单选框的表格
效果:不只是带单选框,点击当前行单选框选中状态网上查了一些发现很多都是只能点击当前radio选中当前行,配合element-ui的单选table时发现两个的选择状态是不一致的,所以调整了一下效果 提供 ...
- python 之 前端开发(form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签)
11.25 form标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- jquery单选框 复选框表格高亮 选中
单选框: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/T ...
- 自设table表格,获取内容,并经弹出框的url传参,获取结果显示在弹出框,并加载合计
table表格,选择框 form id="editForm1"> <table class="table_form"> <td > ...
- element-ui Table表格结合CheckBox实现单选效果
最近做项目遇到一个需求,需要实现一个表格的单选,由于项目使用的是element-ui.于是去看了表格的文档,确实有单选的方法,但是官方的单选是直接选中表格行,通过颜色来区分 看着效果不明显,实际需要一 ...
- vue+iview中的table表格导出excel表格
一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...
随机推荐
- Pell Sequence
/* * PellSequence.cpp * * Created on: 2013-09-08 16:46 * Author: lg * Description: a1 = 1, a2 = 2, . ...
- ubuntu安装vmware 64位
1.从官网上获取http://www.vmware.com/products/workstation/workstation-evaluation.html 2.执行安装程序 chmod +x VMw ...
- [NOIP2003普及组]麦森数(快速幂+高精度)
[NOIP2003普及组]麦森数(快速幂+高精度) Description 形如2^P-1的素数称为麦森数,这时P一定也是个素数.但反过来不一定,即如果P是个素数,2^P-1不一定也是素数.到1998 ...
- B1818 [Cqoi2010]内部白点 树状数组
这个题的想法很好想,就是进行排序之后直接检查每个点的上下左右是否有黑点就行.但是直接枚举显然不行,那怎么办呢?我们就用树状数组维护扫描线,把每排左右点看成一条线覆盖,然后从下往上扫,遇到下加一,遇到上 ...
- bzoj 2276 [ Poi 2011 ] Temperature —— 单调队列
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2276 维护 l 递减的单调队列,队头的 l > 当前的 r 就出队,因为不能是连续一段 ...
- bzoj3940
AC自动机 复习一下... 可惜又写错了 我们发现就是把单词建成ac自动机,然后把串在ac自动机上跑一遍,每到一个单词结束点就删除,删除是利用栈,每次弹出单词长度个字符就可以了 发现两个小问题,str ...
- 69.资金管理-税率表管理extjs 页面
1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8&quo ...
- IP V4 和 IP V6 初识
IP V4 是互联网协议的第四版 地址长度为32位,4字节,用十进制表示 格式为:A.B.C.D 最大的问题在于网络地址资源有限,严重制约了互联网的应用和发展 IP V6 是互联网协议的I ...
- Euclid(几何)
http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2831 题意:已知A,B,C,D,E,F的坐标, ...
- [Swift通天遁地]四、网络和线程-(12)使用ReachabilitySwift实现对网络状态的检测
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...