ANTD-Vue 多选框全选

<template><div><p><!-- 开始介绍属性 ！！！@change：变化时回调函数v-model：选择框的状态indeterminate：只是单纯的一个过渡选择框状态的样式，（介于用户选择了大于0个选项，却没有全选的中间样式，说实话这个属性挺鸡肋的容易混淆视觉，我刚开始接触的时候很苦恼为什么要有一个这样的中间过渡样式，我关注的只是全选or全不选， 我会贴上详细的图片。）options：渲染可选项列表--><a-checkbox@change="onChange"v-model="allCheckout":indeterminate="indeterminate">全选</a-checkbox></p><p><a-checkbox-groupv-model="checkedList":options="plainOptions"@change="onlyChange"/></p></div>
</template>
<script>
export default {data() {return {indeterminate: true, //只是单纯的一个样式状态罢了（我觉得没有意义）allCheckout: false, //全选选择框状态checkedList: ["HN", "GD"], //默认选中的项plainOptions: [{ label: "河南", value: "HN" },{ label: "河北", value: "HB" },{ label: "江西", value: "JX" },{ label: "广东", value: "GD" },], //渲染可选项列表};},methods: {// 全选影响单选onChange() {if (this.allCheckout) {this.checkedList = this.plainOptions.map((item, index) => {return item.value;});} else {this.checkedList = [];}},// 单选状态onlyChange() {//过渡样式状态=存在默认选中项&&默认项的长度<全部列表的长度this.indeterminate =!!this.checkedList.length &&this.checkedList.length < this.plainOptions.length;},},watch: {// 监听单选状态列表是否影响全选标签状态checkedList(newValue, oldValue) {// 全选状态=最新单选列表长度===渲染可选项列表长度this.allCheckout = newValue.length === this.plainOptions.length;},},
};
</script>
<style scoped>
</style>

indeterminate未选择状态

其实这里indeterminate的状态并不重要，因为过渡样式并没有起效

indeterminate选择大于0且小于渲染数组长度过渡状态
indeterminate的状态起效

indeterminate全选状态
其实这里indeterminate的状态并不重要，因为过渡样式已经没有了

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！