微客导航 » 文章资讯 » Iview Table组件中各种组件扩展的使用

Iview Table组件中各种组件扩展的使用

2023-09-06 20:47:05 183

一、IviewTable组件多选框选中和禁选设置

Table添加多选框

通过给columns数据设置一项，指定 type:'selection'，即可自动开启多选功能。

正确使用好以下事件，可以达到需要的效果：

@on-select，选中某一项触发，返回值为 selection 和 row，分别为已选项和刚选择的项。
@on-select-all，点击全选时触发，返回值为 selection，已选项。
@on-selection-change，只要选中项发生变化时就会触发，返回值为 selection，已选项。

给data项设置特殊key_checked:true可以默认选中当前项。

给data项设置特殊key_disabled:true可以禁止选择当前项。

例如：

for(vari=0;i
二、IviewTable组件中点击Icon弹出Poptip的写法


1.图标禁用方式


{
title:'撤销',
key:'operate',
width:70,
fixed:'right',
render:(h,params)=>{
if(params.row.status==='1'){//选中当前行信息
returnh('div',[
h('div',[
h('Poptip',{
props:{
confirm:true,
title:'确定要撤销吗！'
},
on:{
'on-ok':()=>{
this.cancelFunction(params.index)
}
}
},[
h('Button',{
props:{
shape:'circle',
icon:'md-return-left'
}
})
])
])
])
}else{
returnh('div',[
h('Button',{
props:{
shape:'circle',
icon:'md-return-left',
disabled:true//禁用图标
}
})
])
}
}
},

2.图标禁用方式


{
title:'修改',
key:'operate',
fixed:'right',
width:70,
textAlign:'right',
render:(h,params)=>{
returnh('div',[
h('Button',{
props:{
shape:'circle',
icon:'ios-paper-plane',
disabled:params.row.status!=='0'
},
on:{
click:()=>{
this.editFunction(params.index)
}
}
})
])
}
},

三、四元运算符:多个三元运算符嵌套


varstate=null;

vardisplay_state=(state==null?"未用":(state==true?"在用":"停用"))

//display_state
//"未用"

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

Iview Table组件中各种组件扩展的使用

热门推荐

随机推荐