Update checkbox.vue
This commit is contained in:
parent
0a36764e78
commit
74e5f493b0
1 changed files with 44 additions and 1 deletions
|
@ -44,6 +44,18 @@
|
|||
<Checkbox label="苹果"></Checkbox>
|
||||
<Checkbox label="西瓜"></Checkbox>
|
||||
</CheckboxGroup>
|
||||
<Divider></Divider>
|
||||
<div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
|
||||
<Checkbox
|
||||
:indeterminate="indeterminate"
|
||||
:value="checkAll"
|
||||
@click.prevent.native="handleCheckAll">全选</Checkbox>
|
||||
</div>
|
||||
<CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
|
||||
<Checkbox label="香蕉"></Checkbox>
|
||||
<Checkbox label="苹果"></Checkbox>
|
||||
<Checkbox label="西瓜"></Checkbox>
|
||||
</CheckboxGroup>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
@ -54,9 +66,40 @@
|
|||
fruit: ['苹果'],
|
||||
tags: [],
|
||||
testValue1: null,
|
||||
testValue2: null
|
||||
testValue2: null,
|
||||
indeterminate: true,
|
||||
checkAll: false,
|
||||
checkAllGroup: ['香蕉', '西瓜']
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleCheckAll () {
|
||||
if (this.indeterminate) {
|
||||
this.checkAll = false;
|
||||
} else {
|
||||
this.checkAll = !this.checkAll;
|
||||
}
|
||||
this.indeterminate = false;
|
||||
|
||||
if (this.checkAll) {
|
||||
this.checkAllGroup = ['香蕉', '苹果', '西瓜'];
|
||||
} else {
|
||||
this.checkAllGroup = [];
|
||||
}
|
||||
},
|
||||
checkAllGroupChange (data) {
|
||||
if (data.length === 3) {
|
||||
this.indeterminate = false;
|
||||
this.checkAll = true;
|
||||
} else if (data.length > 0) {
|
||||
this.indeterminate = true;
|
||||
this.checkAll = false;
|
||||
} else {
|
||||
this.indeterminate = false;
|
||||
this.checkAll = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
setTimeout(() => {
|
||||
this.tags = [
|
||||
|
|
Loading…
Add table
Reference in a new issue