CheckboxGroup
复选按钮组。
示例
默认用法
<nut-checkboxgroup :data="data1"></nut-checkboxgroup>
export default {
data(){
return{
data1:[
{id:1,name:'test1',value:1},
{id:2,name:'test1',value:2},
{id:3,name:'test1',value:3},
{id:4,name:'test1',value:4},
{id:5,name:'test1',value:5}
]
}
}
}
回调事件
<nut-checkboxgroup
:data="data2"
@change="test1">
</nut-checkboxgroup>
export default {
data(){
return{
data2:[
{id:10,name:'test',value:'是',label:'是',checked:true},
{id:12,name:'test',value:'否',label:'否',checked:false},
]
}
},
methods:{
test1(item){
alert(item.value+'checked:'+event.target.checked);
}
}
}
禁用选项
<nut-checkboxgroup
:data="data3"
@change="change">
</nut-checkboxgroup>
export default {
data(){
return{
data3:[
{id:11,name:'test2',value:'足球',},
{id:22,name:'test2',value:'篮球',checked:false},
{id:33,name:'test2',value:'羽毛球',checked:false},
{id:44,name:'test2',value:'乒乓球',disabled:true,checked:false},
{id:55,name:'test2',value:'排球',checked:true}
]
}
},
methods:{
change(item,index){
console.log(index,event.target.value,event.target.checked);
}
}
}
.nut-checkboxgroup .checkboxlist{
display: inline-block;
width: 100px;
}
Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|
data | 数据源,对象数组(必传) | Array | [] | |
inline | 是否在一行展示 | Boolean | false | true/false |
Events
事件名 | 说明 | 回调参数 |
---|
change | 选择时触发回调函数change(item,index,event) | item,index,event |