首页 > 其他分享 >vue el-tree树形结构选中子节点,保持父节点选中

vue el-tree树形结构选中子节点,保持父节点选中

时间:2022-11-10 17:02:17浏览次数:43  
标签:el const log refs tree id 选中 节点

<!--菜单分配弹窗-->
        <el-dialog title="菜单分配" :visible.sync="menuDialogVisible" width="30%">
            <el-tree
                    :props="props"
                    :data="menuData"
                    node-key="id"
                    ref="tree"
                    :default-expanded-keys="expends"
                    :default-checked-keys="checks"
                    show-checkbox
                    :check-strictly="true"
            >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span><i :class="data.icon"></i> {{ data.name }}</span>
                </span>
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="menuDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveRoleMenu()">确 定</el-button>
            </div>
        </el-dialog>

:check-strictly="true"这个参数很重要,check-strictly:表示在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false。

saveRoleMenu() {
                console.log()
                // 父级id获取到
                const checkedkeys = this.$refs.tree.getHalfCheckedKeys()
                //子节点的权限id
                const id = this.$refs.tree.getCheckedKeys()
                const ids = checkedkeys.concat(id)
                // console.log(ids)
                // console.log('父id',this.$refs.tree.getHalfCheckedKeys())
                // console.log('子节点id', this.$refs.tree.getCheckedKeys())
                // return
                this.request.post("/role/roleMenu/" + this.roleId, ids).then(res => {
                    console.log(res)
                    if (res.code == '200') {
                        this.$message.success("绑定成功")
                        this.menuDialogVisible = false
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            },

获取父节点的id:this.$refs.tree.getHalfCheckedKeys()
获取子节点的权限id:const id = this.$refs.tree.getCheckedKeys()
合并成一个数组发送给后台:const ids = checkedkeys.concat(id)

标签:el,const,log,refs,tree,id,选中,节点
From: https://www.cnblogs.com/photo520/p/16877649.html

相关文章

  • vue3:elementPlus的dailog组件title标题位置设置
     按照官网打开弹出窗想要的是这种效果但自己出现的是下面这种,title跑中间了,body区唯一一个控件,也跑到下面了   设置el-dialog__header高度后,高度的确发生了变......
  • django 根据数据库表结构逆向操作model,同步表结构到models.py
    根据数据库表结构的修改,同步models.py,比如我们修改了数据库中某张表的字段类型,或者给这张表又加了好几个字段,这时我们在models.py中一个字段一个字段的加会有点麻烦,并且可......
  • Elasticsearch自定义评分+折叠Java实现
    QueryBuilderboolQueryBuilder=query.getBoolQueryBuilder(localInfoRequest,QueryEnum.termsQuery); FunctionScoreQueryBuilder.FilterFunctionBuilder[]filterF......
  • element form 动态增减表单项加验证
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="v......
  • SpringBoot整合Velocity(十二)
    二八佳人体似酥,腰间仗剑斩愚夫。虽然不见人头落,暗里教君骨髓枯。上一章简单介绍了SpringBoot整合FreeMarker(十一),如果没有看过,​​请观看上一章​​学习整合之前,可以看一......
  • shell中算术运算加减
    在shell脚本中,所有的变量默认都是字符串存储,操作也是按照字符串进行处理的,但我们不可避免的需要对各中数值进行算术运算,如算术的相加减,那么这时怎么处理呢?在shell脚本中,我......
  • 微信小程序自定义showModel后怎么获取获取input框输入值
    先看下效果自己调样式太好玩了哈哈哈参考官方文档用官方的直接copy过来就可以实现https://developers.weixin.qq.com/miniprogram/dev/component/input.htmlwxml......
  • el-calendar 自定义我的日程
    效果图1. el-calendar官方文档内容太少,具体需要css样式,可以根据ui设置自行修改,一下的代码只展示JS的逻辑.2. 遍历日期,确定显示内容<el-calendarv-model="value"><te......
  • docker安装laravel
    官网文档:https://learnku.com/docs/laravel/9.x/installation/12200#getting-started-on-macoscurl-s"https://laravel.build/example-app"|bash此URL中的「exam......
  • 视频直播app源码,element表格table点击添加背景色
    视频直播app源码,element表格table点击添加背景色  cellclick(row,column){   this.row=row;   this.column=column;  },   tableCellStyl......