ElementUI el-checkbox实现全选反选单选

最新推荐文章于 2024-10-21 16:11:59 发布

原创

最新推荐文章于 2024-10-21 16:11:59 发布 · 4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#java #js #python #vue #javascript

本文介绍如何在Vue应用中实现一个多选组，支持全选、反选和单选功能，同时确保提交表单时至少选择一种类型，且参数使用英文ID。展示了代码实现和交互细节。

一、概述

先来看一下效果图

需求：

1. 每一种类型，可以全选，反选(一个都不选)，单选(仅选一个或者多个)

2. 保存时，至少有一种类型，选择1个或多个。不能都不选，直接提交空表单。

3. 保存时，提交参数都是id，不能出现中文。

初始页面数据如下：

[{
    "groupId": 1,
    "groupName": "运动",
    "checkAll": false,
    "ischeckAll": [],
    "interestList": [{
        "name": "篮球",
        "tasteId": 10
    }, {
        "name": "足球",
        "tasteId": 11
    }, {
        "name": "乒乓球",
        "tasteId": 12
    }]
}, {
    "groupId": 2,
    "groupName": "棋类",
    "checkAll": false,
    "ischeckAll": [],
    "interestList": [{
        "name": "军旗",
        "tasteId": 14
    }, {
        "name": "象棋",
        "tasteId": 15