|
@@ -3,10 +3,15 @@
|
|
|
## 基本用法(2s后动态更新)
|
|
## 基本用法(2s后动态更新)
|
|
|
|
|
|
|
|
```html
|
|
```html
|
|
|
-<nut-checkboxgroup
|
|
|
|
|
- :checkBoxData="data">
|
|
|
|
|
- v-model="group"
|
|
|
|
|
|
|
+<nut-checkboxgroup
|
|
|
|
|
+ ref="checkboxGroup"
|
|
|
|
|
+ :checkBoxData="data"
|
|
|
|
|
+ v-model="group">
|
|
|
</nut-checkboxgroup>
|
|
</nut-checkboxgroup>
|
|
|
|
|
+<p>{{group1}}</p>
|
|
|
|
|
+<nut-button small @click="checkAll(true)">全选</nut-button>
|
|
|
|
|
+<nut-button small @click="checkAll(false)">取消全选</nut-button>
|
|
|
|
|
+<nut-button small @click="checkAll()">反选</nut-button>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
```javascript
|
|
```javascript
|
|
@@ -25,6 +30,11 @@ mounted(){
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
|
this.group.push('选项B')
|
|
this.group.push('选项B')
|
|
|
}, 2000);
|
|
}, 2000);
|
|
|
|
|
+},
|
|
|
|
|
+methods:{
|
|
|
|
|
+ checkAll(state){
|
|
|
|
|
+ this.$refs.checkboxGroup.toggleAll(state);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
```
|
|
```
|
|
|
v-model绑定的数组选项对应data的value值,控制选项是否选中,如代码所示,‘选项A’被勾选。如果group为空那么所有选项未选中。
|
|
v-model绑定的数组选项对应data的value值,控制选项是否选中,如代码所示,‘选项A’被勾选。如果group为空那么所有选项未选中。
|
|
@@ -224,3 +234,11 @@ methods: {
|
|
|
|----- | ----- | -----
|
|
|----- | ----- | -----
|
|
|
| change | 值变化时触发 | 当前已选中项的状态(values),当前选中项值(label),event
|
|
| change | 值变化时触发 | 当前已选中项的状态(values),当前选中项值(label),event
|
|
|
|
|
|
|
|
|
|
+## CheckboxGroup 方法
|
|
|
|
|
+
|
|
|
|
|
+#### 通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法
|
|
|
|
|
+
|
|
|
|
|
+| 方法名 | 说明 | 参数
|
|
|
|
|
+|----- | ----- | -----
|
|
|
|
|
+| toggleAll | 切换所有复选框的选中状态 | checked?: boolean
|
|
|
|
|
+
|