drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update checkbox.vue

Browse source
This commit is contained in:
梁灏 2019-09-15 10:42:36 +08:00
parent 0a36764e78
commit 74e5f493b0
1 changed files with 44 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
examples/routers/checkbox.vue
View file

@ -44,6 +44,18 @@
<Checkbox label="苹果"></Checkbox> <Checkbox label="苹果"></Checkbox>
<Checkbox label="西瓜"></Checkbox> <Checkbox label="西瓜"></Checkbox>
</CheckboxGroup> </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> </div>
</template> </template>
<script> <script>
@ -54,9 +66,40 @@
fruit: ['苹果'], fruit: ['苹果'],
tags: [], tags: [],
testValue1: null, 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 () { mounted () {
setTimeout(() => { setTimeout(() => {
this.tags = [ this.tags = [