element多个多选功能实现

最新推荐文章于 2024-05-10 09:26:14 发布
最新推荐文章于 2024-05-10 09:26:14 发布
阅读量1.9k 收藏
点赞数
原文链接：https://www.cnblogs.com/huangzhen-yy/p/11269692.html
版权

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>element-ui的el-checkbox嵌套多选</title>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">
            <div slot="content" style="width: 600px; padding: 0 40px;margin: 0 auto;">
                <div class="checkbox-table" v-for="(item, indexkey) in menu" :key="item.id">
                    <template>
                        <el-checkbox class="check1" style="font-weight: 600;margin-bottom: 15px " v-model='menusIds' :label="item.id"
                         @change='handleCheck(1,indexkey)'>
                            {{item.name}}
                        </el-checkbox>
                        <div style="margin-bottom: 20px;">
                            <div v-for="list in item.children" class="line-check" :key="list.id" style="display: inline-block; margin-left: 20px;margin-bottom: 20px;">
                                <el-checkbox class="check2" @change='handleCheck(2,indexkey)' v-model="menusIds" :label="list.id">
                                    {{list.name}}
                                </el-checkbox>
                            </div>
                        </div>
                    </template>
                    <div @click="test">提交</div>
                </div>
            </div>
        </div>
    </body>
    <script src="https://cdn.bootcss.com/vue/2.6.3/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    menu: [ 
                        {
                            "id": 1,
                            "name": "课程管理",
                            "ename": "course-manage",
                            "children": [{
                                "id": 2,
                                "name": "课程模板",
                            }, {
                                "id": 3,
                                "name": "课程列表",
                            }, {
                                "id":4,
                                "name": "已归档课程",
                            }]
                        },
                        {
                            "id":5,
                            "name": "内容",
                            "ename": "content",
                            "children": [{
                                "id": 6,
                                "name": "广告位",
                            }, {
                                "id": 7,
                                "name": "关于我们",
                            }]
                        },
                        {
                            "id": 8,
                            "name": "用户",
                            "ename": "user",
                            "children": [{
                                "id": 9,
                                "name": "用户管理",
                            }, {
                                "id": 10,
                                "name": "主办方",
                            }, {
                                "id": 11,
                                "name": "组织者",
                            }]
                        },
                    ],
                    menusIds: []
                }
            },
            methods: {
                test() {
                    console.log(this.menusIds);
                },
                // 处理选择事件
                handleCheck(type, a = 0) { // 多选框
                debugger
                    let self = this;
                    if (type == 2) { // 二级菜单点击
                        let index = 0;
                        self.menu[a].children.map(item => {
                            debugger
                            if (self.menusIds.indexOf(item.id) > -1) {
                                index += 1;
                            }
                        })
                        if (index > 0) {
                            if (self.menusIds.indexOf(self.menu[a].id) < 0) {
                                self.menusIds.push(self.menu[a].id);
                            }
                        } else {
                            if (self.menusIds.indexOf(self.menu[a].id) > 0) {
                                self.menusIds.splice(self.menusIds.indexOf(self.menu[a].id), 1);
                            }
                        }
                    } else {
                        if (self.menusIds.indexOf(self.menu[a].id) > -1) {
                            self.menu[a].children.map(item => {
                                if (self.menusIds.findIndex((n) => n == item.id) < 0) {
                                    self.menusIds.push(item.id)
                                }
                            })
                        } else {
                            self.menu[a].children.map(item => {
                                if (self.menusIds.findIndex((n) => n == item.id) > -1) {
                                    self.menusIds.splice(self.menusIds.findIndex((n) => n == item.id), 1);
                                }
                            })
                        }
                    }
                },
                //编辑某个菜单
                // handleEdit(obj) {
                //     let self = this;
                //     self.obj = obj;
                //     let array = obj.menuIds ? obj.menuIds.split(',') : []
                //     let arr = [];
                //     array.map(item => {
                //         arr.push(parseInt(item));
                //     })
                //     this.menusIds = arr;
                // },
                // 获取所有菜单列表
                // async _allMenuApi() {
                //     let res = await fetchRights();
                //     if (res.code == 200) {
                //         this.menu = res.data.allMenus;
                //     }
                // }
            }
        })
    </script>
</html>

 

 

 

 

 

 

 

 

 

 

一只害虫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element-ui中 选择器（select）多选下拉框实现全选功能.zip
10-10
在实际应用中，全选功能常用于批量操作，如用户一次性勾选多个选项进行批量删除、导出等操作。 首先，我们需要了解`<el-select>`的基本用法。在Element-UI中，`<el-select>`组件用于创建一个下拉选择框，通过`...
element ui select多选组件 重构
05-03
2. **多选功能**：`el-select` 支持多选模式，用户可以通过 `multiple` 属性开启。在多选模式下，用户可以同时选择多个选项，这些选定的值将被存储在一个数组中。 3. **插件集成（plugins）**：可能需要引入第三方...
element-ui 多选实现单选效果
2401_84868241的博客
05-08 220
element-ui 多选实现单选效果
Element-ui el-table组件单选/多选/跨页勾选讲解
日常笔记/总结/系列知识梳理
05-10 3568
el-table是 Element UI（一个基于 Vue.js 的高质量 UI 组件库）中的一个组件，用于展示表格数据。通过el-table，你可以很方便地创建具有多种功能（如排序、筛选、分页等）的表格。
vue中 element 单选多选功能的实现
weixin_45419441的博客
08-12 1591
单选html 因为当前的选项数据是通过for循环遍历出来的 所以当前的每一个checkbox也是通过循环遍历得出 所以当双向绑定数据的时候就会遇到问题 发起请求获取到当前选项的json数据 对数据进行map遍历 添加新的属性 isSelected 并且为 false (map为对数组进行遍历 并改变原数组) 对单选按钮双向绑定的时候就可以绑定到 当前item下的isSelected 多选按钮 定义一个变量双向绑定到多选按钮 通过change事件...
element-table + el-pagination 实现分页多选功能
青蛙king的博客
10-22 433
首先，在 el-table 中添加 :row-key=“getRowKeys” 和 selection-change 事件（当选择项发生变化时会触发该事件）。然后，给多选框的一列添加 :reserve-selection=“true”。/** ElementUI的table实现分页多选功能 ----star *//** ElementUI的table实现分页多选功能 ----end */// 设置表格每一页的唯一标识。// 表单查询-获取表格数据。// 分页-每页条数。// 分页-当前页数。
Element分页多选功能
Change!
02-15 271
Element跨页多选功能
vue2+Element表格实现跨页多选功能
myeye520的博客
04-10 1187
在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。注意此处很重要，用你每行数据的唯一值，此处我用的activityId，一般数据的唯一值应该是id。错误原因就是未能保证表格dom彻底加载后再使用toggleRowSelection方法，当然这种一般只在弹窗内表格这种场景才会出现，上述《三：数据回显》已经处理了这种问题。仅对 type=selection 的列有效，类型为 Boolean，为 true则会在数据更新之后保留之前选中的数据（需指定 row-key）
Element的table多选表格实现单选效果
weixin_63621456的博客
08-23 605
Element的table多选表格实现单选效果
Element多选表格实现批量删除
tanxinji的博客
04-28 5031
 官网链接: https://element.eleme.cn/#/zh-CN/component/table  数据和选中都来自官网。  界面删除: this.$refs.表格ref属性名.selection获取选择的行数据，依次遍历每行数据的id，和生成该表格每行数据的vue中的data比较，如果相同就删了 data.remove( index , 1) 。每行数据必须有唯一标识符。  数据库删除: 遍历选中的每行的id，存放在一个数组中，通过axios来删除。  下面只演示界面删除。  vue.js文
实现 element-plus 表格多选时按 shift 进行连选的功能
ymzhao
02-14 2409
element-plus表格提供了多选功能，可单击勾选一条数据，可全选。现在有个很合理的需求，希望实现类似于文件系统中shift连续选择功能，并且在表格排序后，依照排序后的顺序连选。
element ui 表格多选变单选
qq_58216500的博客
04-02 379
首先需要定义表格的ref,在其选择的长度大于1时便可使用 this.$refs.multipleTable.clearSelection()先将其选择置空， 再使用val.pop(),返回的是数组的最后一项,最后使用this.$refs.multipleTable.toggleRowSelection(val.pop())将其最后的选择项放置方法中。
Vue Element 分组+多选+可搜索Select选择器实现示例
10-18
在Vue Element UI中，`Select`组件是一个常用的下拉选择器，...通过以上步骤，我们就成功地实现了Vue Element中的分组、多选和搜索功能的`Select`选择器。这个示例对于需要类似功能的开发者来说，具有很高的参考价值。
ui组件之input多选下拉实现方法（带有搜索功能）
09-02
3. **多选功能**： 多选通常是通过在输入框旁边动态添加`<span>`元素来实现的，每个`<span>`代表一个已选的选项。当用户选择一个选项后，该选项的值会被添加到`<span>`，并可以通过`<i>`元素添加删除按钮，让用户...
Element ui 下拉多选时新增一个选择所有的选项
12-09
以下是对这个功能实现的详细解释： 首先，我们需要创建一个基础的Vue.js应用，并引入Element UI的相关资源。在HTML文件中，我们会看到以下结构： ```html <!DOCTYPE html> <title>Document ...
智慧校园音视频系统整体解决方案-1PPT(24页).pptx
07-28
智慧校园整体解决方案是响应国家教育信息化政策，结合教育改革和技术创新的产物。该方案以物联网、大数据、人工智能和移动互联技术为基础，旨在打造一个安全、高效、互动且环保的教育环境。方案强调从数字化校园向智慧校园的转变，通过自动数据采集、智能分析和按需服务，实现校园业务的智能化管理。 方案的总体设计原则包括应用至上、分层设计和互联互通，确保系统能够满足不同用户角色的需求，并实现数据和资源的整合与共享。框架设计涵盖了校园安全、管理、教学、环境等多个方面，构建了一个全面的校园应用生态系统。这包括智慧安全系统、校园身份识别、智能排课及选课系统、智慧学习系统、精品录播教室方案等，以支持个性化学习和教学评估。 建设内容突出了智慧安全和智慧管理的重要性。智慧安全管理通过分布式录播系统和紧急预案一键启动功能，增强校园安全预警和事件响应能力。智慧管理系统则利用物联网技术，实现人员和设备的智能管理，提高校园运营效率。 智慧教学部分，方案提供了智慧学习系统和精品录播教室方案，支持专业级学习硬件和智能化网络管理，促进个性化学习和教学资源的高效利用。同时，教学质量评估中心和资源应用平台的建设，旨在提升教学评估的科学性和教育资源的共享性。 智慧环境建设则侧重于基于物联网的设备管理，通过智慧教室管理系统实现教室环境的智能控制和能效管理，打造绿色、节能的校园环境。电子班牌和校园信息发布系统的建设，将作为智慧校园的核心和入口，提供教务、一卡通、图书馆等系统的集成信息。 总体而言，智慧校园整体解决方案通过集成先进技术，不仅提升了校园的信息化水平，而且优化了教学和管理流程，为学生、教师和家长提供了更加便捷、个性化的教育体验。
基于Springboot和Vue的铁路订票管理系统源码 铁路订票管理系统代码（高分优秀毕业设计）
07-28
铁路订票管理系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
四足机器人 (2).pdf
最新发布
07-28
四足机器人 (2)
Element Ui Cascader 多选实现原理
06-10
Element UI Cascader 组件的多选实现原理是基于 Vue.js 的 v-model 实现的。 首先，我们需要在 Cascader 组件中添加 multiple 属性，用于指定是否...这样，我们就成功地实现了 Element UI Cascader 组件的多选功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值