element多个多选功能实现

最新推荐文章于 2024-07-09 14:10:47 发布
最新推荐文章于 2024-07-09 14:10:47 发布
阅读量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
    评论
nested_el-checkbox:element-ui的el-checkbox实现嵌套多选，单选
05-12
nested_el-checkbox element-ui的el-checkbox实现嵌套多选，单选 tips:chrome获取本地json数据时会产生跨域问题，建议用firefox直接打开 效果图 主要功能： 实现多选框层级嵌套 当选中一个二级子菜单的时候，其对应的上级菜单也选中 若二级子菜单无一个选中，则对应的一级菜单也不是选中状态 当一级菜单发生点击事件时，若原本为选中状态，则取消选中，若该菜单下有二级子菜单，所有子菜单也取消选中状态；若原本为未选中状态，则改为选中状态，若该菜单下有二级子菜单，所有子菜单也改为选中状态。 实现已有的选择记录的复现。 实现过程 1.data数据 data() { return { menu: [] //所有的菜单数组， menusIds: [] //已选的菜单id数组 } } 2.html部分   要实现一个嵌套的效果，每一个一级菜单应该
element的全选多选和反选
......
07-10 3529
记录一下，以防自己忘记！！！
elementUI下拉选项加多选框功能实现（自己添加“全部”选项
最新发布
wwf1225的博客
07-09 511
二、升级—添加全部选项。
elementui 多选框的使用
greed
08-27 6094
elementui 多选框的使用 checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。 el-checkbox 的 label属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。label与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。 html <!-- v-model绑定的数组代表已经选择的选项 选择之后会把label中的值存入 v
vue elementui checkbox多选框功能
buukyjmvni的博客
09-09 3017
一、在选择框上方添加一个多选 //增加的 <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" class="fla" >全选</el-checkbox > //以下是被选择的数据
elementUi中的table实现跨页多选数据——功能实现
yehaocheng520的博客
09-01 1万+
最近在开发工业品超市的后台系统，遇到一个需求，就是实现在一个table表格中多选数据，由于table表格中的数据较多，所以要分页获取，因此现在的需求变为：如果在跨页的table表格中跨页选择数据 我一直以为elementUi中的table是不能实现此功能的，结果百度后发现，竟然是支持的。 效果图： 表格第一页选中2条数据： 表格第二页选中1条数据 这样返回到第一页的时候，第一页选中的两条数据还是勾选的状态的。 点击表格底部的完成选择订单按钮，可以拿到选中的三条数据。 跨页多选功能实现 给table添加r
Vue Element 分组+多选+可搜索Select选择器实现示例
10-18
在Vue Element UI中，`Select`组件是一个常用的下拉选择器，...通过以上步骤，我们就成功地实现了Vue Element中的分组、多选和搜索功能的`Select`选择器。这个示例对于需要类似功能的开发者来说，具有很高的参考价值。
Element-ui中 选择器（select）多选下拉框实现全选功能.zip
10-10
在实际应用中，全选功能常用于批量操作，如用户一次性勾选多个选项进行批量删除、导出等操作。 首先，我们需要了解`<el-select>`的基本用法。在Element-UI中，`<el-select>`组件用于创建一个下拉选择框，通过`...
element ui select多选组件 重构
05-03
2. **多选功能**：`el-select` 支持多选模式，用户可以通过 `multiple` 属性开启。在多选模式下，用户可以同时选择多个选项，这些选定的值将被存储在一个数组中。 3. **插件集成（plugins）**：可能需要引入第三方...
ui组件之input多选下拉实现方法（带有搜索功能）
09-02
3. **多选功能**： 多选通常是通过在输入框旁边动态添加`<span>`元素来实现的，每个`<span>`代表一个已选的选项。当用户选择一个选项后，该选项的值会被添加到`<span>`，并可以通过`<i>`元素添加删除按钮，让用户...
Element ui 下拉多选时新增一个选择所有的选项
12-09
以下是对这个功能实现的详细解释： 首先，我们需要创建一个基础的Vue.js应用，并引入Element UI的相关资源。在HTML文件中，我们会看到以下结构： ```html <!DOCTYPE html> <title>Document ...
ElementUI表格数据批量选中操作
Dream_Haunting的博客
12-23 9217
ElementUI表格数据批量选中操作 最近做项目时碰到个需求，要对表格中的数据批量处理，花了点时间最终解决了这个问题，下面直接上代码
elementUI表格多选实现方式
发渐稀的博客
08-19 2797
是因为当数据量比较多的时候，数据会进行分页展示，例如有30条数据，每页在初始化时展示10条，第二页甚至第三页数据其实是没有获取的，该策略被称之为是懒加载，可以大大缩短求情时间，提升用户体验。那么，如何获取选中的数据呢，官方文档提供了三种钩子函数，但是一个就可以满足需求了，在表格设置中加上selection-change 这个事件，其功能为：只要选中的数据发生改变，那么就会触发这个函数。之前所做的工作，仅仅只能在当前页进行选中，获取选中的数据，而不能实现换页一起选中，点击下一页之后，之前选中的数据就丢失了。
VUE-Element组件（九） CheckBox多选框
w_t_y_y的博客
08-13 1万+
一、举例：现有通讯录，点击出现通讯录选择弹框。弹框右侧为选择的用户列表，可以点击删除，左侧默认为角色列表，可以勾选角色，也可以点击角色进入角色详情页勾选具体的用户。还可以在左侧上方搜索用户名或者账号出来用户列表来勾选。其中，角色列表复选框、搜索用户列表复选框、选中的用户列表复选框，三者的选中状态需要关联（不勾选、半选、全选）。 代码实现： 1、父组件： <div class="user-div" @click="openSelectUserDialog"> &...
element-ui 里面el-checkbox多选框，实现全选单选
热门推荐
肖肖肖丽珠的博客
07-31 9万+
效果图   接口数据。是一个三层循环的数组。先是data -eventtype-operation  每个数据里面有个ischecked的属性用来表示他是否选中   data里面定义了        data:[],         actionids:[],//选择的那个actionid         num1:0,//没选择的计数         num2:0,//选中的计...
Element UI实现单选多选，批量删除
牛文文的Home
08-09 7746
先再el-table标签内添加点击复选框的事件和点击行的事件 <el-table v-loading="listLoading" :data="datalist" @selection-change="handleSelectionChange" //多选，当选择项发生变化时会触发该事件 @row-click="handleRowClick" //点击每行时触发事件 ref="handSelectTest_multip
ElementUI Form：Checkbox 多选框
ChinaDragon10的博客
01-31 1758
ElementUI Form：Checkbox 多选框
elementUi实现多选
weixin_47373981的博客
02-29 246
【代码】elementUi实现多选。
Element-UI el-select下拉框多选实现全选
一碗清深的博客
11-17 3283
在el-select下拉框中实现多选全选的功能
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、付费专栏及课程。

余额充值