vue3+antd 多选框全选和单选联动

最新推荐文章于 2025-04-27 17:39:14 发布

原创最新推荐文章于 2025-04-27 17:39:14 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端

vue 同时被 3 个专栏收录

5 篇文章

订阅专栏

antd

1 篇文章

订阅专栏

多选框全选

1 篇文章

订阅专栏

本文展示了如何在Vue中使用AntDesignVue组件库实现多选与单选联动的效果，主要涉及checkbox组、collapse折叠面板及状态管理。代码包括HTML结构、JavaScript逻辑，涉及checkAllChange和onCheckChange两个关键方法，用于处理全选和单个选项的选择状态更新。

实现效果

多选单选联动

主要代码

一，html部分

   <a-form-item label="功能权限" name="scope">
            <div v-for="(item, index) in scopeList" :key="index">
              <a-collapse v-model:activeKey="activeKey" collapsible="icon">
                <template #expandIcon="{ isActive }">
                  <RightOutlined :rotate="isActive ? 90 : 0" />
                </template>
                <a-collapse-panel :key="index.toString()" :showArrow="true">
                  <template #header>
                    <div @Click="(e) => e.stopPropagation()">
                      <a-checkbox
                        v-model:checked="item.checkAll"
                        :indeterminate="item.indeterminate"
                        name="all"
                        @change="checkAllChange($event, index)"
                        >{{ item.name }}
                      </a-checkbox>
                    </div>
                  </template>
                  <a-checkbox-group
                    v-model:value="item.checkedList"
                    @change="onCheckChange($event, index)"
                  >
                    <div class="flex-box">
                      <div
                        v-for="(i, ind) in item.children"
                        :key="ind"
                        class="check-span"
                      >
                        <a-checkbox
                          :value="i.id"
                          class="has-plan-padding"
                          name="all"
                        >
                          <span>{{ i.name }}</span>
                        </a-checkbox>
                      </div>
                    </div>
                  </a-checkbox-group>
                </a-collapse-panel>
              </a-collapse>
            </div>
          </a-form-item>

二，js部分

这里需求不止一个服务管理，所以是一个数组格式，可根据需求调整代码

   const state = reactive({
      scopeList: [
        {
          name: "服务管理",
          checkedList: ref([] as any),
          indeterminate: false,
          checkAll: false,
          children: [
            {
              name: "新增服务",
              id: 0,
            },
            {
              name: "分组管理",
              id: 1,
            },
            {
              name: "样式设置",
              id: 2,
            },
            {
              name: "批量操作",
              id: 3,
            },
            {
              name: "编辑",
              id: 4,
            },
            {
              name: "删除",
              id: 5,
            },
          ],
        },
      ],
    });

三，多选方法

    const checkAllChange = (event, index) => {
      let withOutPmIds = state.scopeList[index].children.map((item) => {
        return item.id;
      });
      state.scopeList[index].checkedList = event.target.checked
        ? withOutPmIds
        : [];
    };

四，单选方法

  const onCheckChange = (event, index) => {
      const checkedLength = state.scopeList[index].checkedList.length;
      const listLength = state.scopeList[index].children.length;
      state.scopeList[index].indeterminate =
        !!checkedLength && checkedLength < listLength;
      state.scopeList[index].checkAll =
        checkedLength > 0 && checkedLength === listLength;
    };