admin管理员组文章数量:1640592
先上一段官方全选的demo代码,官方效果https://www.iviewui/components/checkbox
为了演示先将苹果选项disabled
<template>
<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 disabled label="苹果"></Checkbox>
<Checkbox label="西瓜"></Checkbox>
</CheckboxGroup>
</template>
<script>
export default {
data () {
return {
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 {
// 取消勾选全部按钮:这里就是disabled的选项值
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;
}
}
}
}
</script>
自己工作学习记录,仅供参考。
本文标签: 选项全选iviewCheckBoxdisabled
版权声明:本文标题:iview中checkbox混合了disabled的选项时取消全选时保留disabled禁用选项 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1729320676a1195843.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论