AntDeisgn中checkbox group的使用

Posted 2023-05-16 Felix_Openmind

<template>
  <!-- 弹窗类型选择 -->
    <div>
        <a-modal :visible="state.modalAttr.visible" title="规选类型"  @ok="showModal" @cancel="hideModal">
            <a-checkbox
                    v-model:checked="state.checkboxAttr.checkAll"
                    :indeterminate="state.checkboxAttr.indeterminate"
                    @change="onCheckAllChange"
            >
                <span >全选</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 > 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>

学而不思则罔，思而不学则殆！

如果单击 v-checkbox，请不要展开 v-list-group

【中文标题】如果单击 v-checkbox，请不要展开 v-list-group

【英文标题】：don't expand v-list-group if click on v-checkbox

【发布时间】：2022-01-05 09:51:06

【问题描述】：

我有一个可扩展的 v-list-group 和一个 v-checkbox，当我单击 v-checkbox 时，列表会切换。我想禁用此反应。有可能的？我的代码元素：

<v-list>
    <v-list-group>
        <template v-slot:activator>
            <v-list-item-action>
                <v-checkbox @click="fn()"/>
            </v-list-item-action>
            <v-list-item-content>
                <v-list-item-title/>
            </v-list-item-content>
        </template>
        ...
    </v-list-group>
</v-list>

谢谢。

【参考方案1】：

尝试在 v-checkbox 上使用 click.stop 以停止点击事件传播。

参考

：https://v3.vuejs.org/api/directives.html#v-on

类似问题

：Vutify list group make parent clickable