<template>
<!-- 弹窗类型选择 -->
<div>
<a-modal :visible="state.modalAttr.visible" title="规选类型" width="680px" @ok="showModal" @cancel="hideModal">
<a-checkbox
v-model:checked="state.checkboxAttr.checkAll"
:indeterminate="state.checkboxAttr.indeterminate"
@change="onCheckAllChange"
>
<span style="color: white">全选</span>
</a-checkbox>
<a-checkbox-group v-model:value="state.checkboxAttr.checkedList">
<a-checkbox v-for="opt in state.categoryOpts" :value="opt.code" @change="onChange">
<span style="color: white">{{ opt.name }}</span>
</a-checkbox>
</a-checkbox-group>
</a-modal>
</div>
</template>
<script setup>
import {defineComponent, ref, reactive, watch, defineExpose, defineEmits, toRaw, onBeforeUnmount, onMounted} from 'vue';
const state = reactive({
modalAttr: {
visible: true,
},
checkboxAttr: {
indeterminate: true,
checkedList: [],
checkAll: false,
},
categoryOpts: [{
name: '实有单位',
code: 'SYDW',
}, {
name: '标准地址',
code: 'JZW',
}, {
name: '实有房屋',
code: 'SYFW'
}, {
name: '实有人口',
code: 'SYRK'
}, {
name: '层户信息',
code: 'CHJGXXB',
}]
})
const showModal = () => {
console.log('state.checkboxAttr.checkedArr::: ', state.checkboxAttr.checkedList)
return;
state.modalAttr.visible = true;
}
const hideModal = () => {
state.modalAttr.visible = false;
}
const onChange = (e, index) => {//单个选择
state.checkboxAttr.indeterminate = !!state.checkboxAttr.checkedList.length && state.checkboxAttr.checkedList.length < state.categoryOpts.length;
state.checkboxAttr.checkAll = state.checkboxAttr.checkedList.length === state.categoryOpts.length;
}
const onCheckAllChange = (e, index) => {//选择全部的事件
if (e.target.checked) {
state.checkboxAttr.indeterminate = false;
state.checkboxAttr.checkedList = state.categoryOpts.map(item => {
return item?.code;
})
} else {
state.checkboxAttr.indeterminate = false;
state.checkboxAttr.checkedList = []
}
}
watch
(
() => state.checkboxAttr.checkedList,
val => {
state.checkboxAttr.indeterminate = false;
state.checkboxAttr.checkAll = state.checkboxAttr.checkedList.length === 5;
console.log('state.checkboxAttr.checkedList:::: ', state.checkboxAttr.checkedList)
},
);
</script>
<style scoped lang="scss">
:deep(ant-modal-title) {
color: white;
}
</style>
标签:AntDeisgn,checkbox,group,name,checkboxAttr,length,state,code,checkedList
From: https://www.cnblogs.com/openmind-ink/p/17405674.html