ElementUI el

2023-09-12 19:43| 来源: 网络整理| 查看: 265

一、概述

先来看一下效果图

需求：

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 }, { "name": "五子棋", "tasteId": 16 }] }]

提交参数格式如下：

{ "interestList": [{ "groupId": 1, "itemList": [] }, { "groupId": 2, "itemList": [14] }] }

注意：itemList是具体某一项的id，比如：足球。

二、代码实现

test.vue

兴趣爱好 {{ parent.groupName }} 全选 {{item.name}} 保存取消 export default { data() { return { groupList: [ { 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 }, { name: '五子棋', tasteId: 16 } ], } ], params: { interestList:[] }, // groupList: [], // 所有电梯列表 } }, mounted() { // console.log("初始数据",JSON.stringify(this.groupList)) }, methods: { // 勾选全选动作 selectAllFunc(id, checkAll) { // console.log("执行selectAllFunc", id, checkAll) // 遍历列表 for (let val of this.groupList) { // 判断groupId if (val.groupId == id) { // 判断全选，如果checkAll为true，则遍历interestList，将tasteId填充到ischeckAll中 // 否则为为空列表，注意：为空时，表示反选。 val.ischeckAll = checkAll ? val.interestList.map(item => item.tasteId) : [] // console.log("ischeckAll", val.ischeckAll) } } // console.log(this.groupList) }, // 设置全选状态 setCheck(id) { // console.log("执行setCheck", id) for (let val of this.groupList) { if (val.groupId == id) { // 判断已经选中的列表是否和选项列表数量一致，如果一致为true，否则为false val.checkAll = val.ischeckAll.length == val.interestList.length ? true : false } } }, // 验证表单 form_validation() { // 设置提交参数列表，遍历groupList，组合新的对象 this.params.interestList = this.groupList.map(item => { return { groupId: item.groupId, itemList: item.ischeckAll } }) // console.log(this.params.interestList) // 选择标志位 let select_flag = false // 遍历提交参数列表 for (let val of this.params.interestList) { // 判断列表长度，只要其中一组选择了，标准为true if (val.itemList.length > 0) { select_flag = true } } // 判断兴趣爱好至少选一个 if (select_flag == false) { this.$message.error("兴趣爱好至少选一个") return false } // return false this.submit() }, submit(){ console.log("提交参数",JSON.stringify(this.params)) } } } .big_title { width: 172px; height: 22px; font-size: 16px; font-family: PingFangSC-Medium, PingFang SC; font-weight: 550; color: #333333; line-height: 22px; } .div_space { height: 15px; } View Code

效果如下：

注意：当选择的选项都选中时，会自动勾选全选，否则不勾选。

【本文地址】

公司简介

联系我们