首页 > 其他分享 >vue + element ui 树形半选传父级id给后台,回显实现

vue + element ui 树形半选传父级id给后台,回显实现

时间:2023-10-24 16:37:05浏览次数:37  
标签:vue 回显 半选传 newArr item let 半选 data id

1. vue2 :

    需要关联父子级: Html部分

check-strictly="false"
<el-tree
      :data="dataTree"
      highlight-current
      show-checkbox
      :check-strictly="false"
      node-key="id"
      :props="defaultProps"
      @check-change="getCheckedKeys"
      v-model="showChecked"
      ref="tree">
    </el-tree>

   js 部分:

 //传给后台
  comfirm(){
    let parentArr = this.$refs.menuTree.getHalfCheckedKeys(); //半选的父级id 集合
    let childeArr = this.$refs.menuTree.getCheckedKeys();  // 全选的父级id , 子级id
    let arr = childeArr.concat(parentArr); //要传给后端的数组集合

  }
 
 
showkeyEve(){
    let params = "roleId=" + this.id +"&moduleId=" +this.modId
    //获取数据
    getRoleFunAuth(params).then(data => {
         // 核心
          //更新数据时的树形显示 (去掉半选状态id避免视图半选状态id下全选)
          let arr = data; //后台返回的id组成的数组
          let newArr = [];
          arr.forEach(item=>{
              this.checked(item,this.dataTree,newArr) // 树形数组:dataTree
          })
              this.showChecked = newArr; //要显示的数组
           
    })
  },
  checked(id,data,newArr) {
    data.forEach(item => {
        if(item.id == id){
              if( item.children.length == 0 ){ //如果没有子级,直接存入
                  newArr.push(item.id)
              }
        }else{
            if( item.children.length !=0 ){  //如果有子级 递归查询子级
                this.checked(id,item.children,newArr)
              }
        }
    });
  },

 原理:

//更新数据时的树形显示 (去掉半选状态id避免视图半选状态id下全选) // 原理: //  递归查询,如果没有子节点,并且id能对应,直接就传入数组, //   如果有子节点:那就只需要添加子节点的id ,父节点不用存,如果子级全部选上了,组件自动关联,父级也会选上 2. vue3 + element ui + treeSelect 下拉选择为树形
<el-tree-select
                        v-model="rulesArr"
                        ref="menuTree"
                        :check-strictly="false"
                        @check-change="getCheckedKeys"
                        placeholder="菜单权限"
                        node-key="id"
                        :highlight-current="true"
                        default-expand-all
                        :data="menuList"
                        multiple
                        collapse-tags
                        collapse-tags-tooltip
                        :props="{label:'title'}"
                        filterable
                        show-checkbox
                        :render-after-expand="false"
                        style="width:100%"
                    />

  

    
  const menuTree = ref(null)
 const rulesArr = ref([])  //选中的项

传给后端
function comfirm(){
  let parentArr = menuTree.value.getHalfCheckedKeys();  //半选的父级 id集合        let childeArr = menuTree.value.getCheckedKeys();  // 全选的父级id  ,子级id集合        let arrSelect = childeArr.concat(parentArr);  //要传给后台的数据       

} //递归函数,用于存已选中的子元素 function checked(id,data,newArr) { data.forEach(item => { if(item.id == id){ if( item.children == null ){ newArr.push(item.id) } }else{ if(item.children!= null && item.children.length !=0 ){ checked(id,item.children,newArr) } } }); console.log('???newArr-------',newArr) } 编辑 : 获取当前已选项 getData(){ adminGroupInfo({id:id}).then(res=>{ console.log('??/获取组信息',res) let data = res.data //更新数据时的树形显示 (去掉半选状态id避免视图半选状态id下全选) let arr = data.rules.split(','); //后台返回的id组成的数组 arr = arr.map(Number); //后台返回的id组成的数组 let newArr = []; arr.forEach(item=>{ checked(item,menuList.value,newArr) //menuList 树形数组 }) rulesArr.value = newArr //转为数字 })

  

 

标签:vue,回显,半选传,newArr,item,let,半选,data,id
From: https://www.cnblogs.com/lxs-616/p/17785128.html

相关文章

  • Vue3中使用富文本编辑器
    在vue3中我们可以使用@wangeditor/editor、@wangeditor/editor-for-vue来实现其功能npm地址:https://www.npmjs.com/package/@wangeditor/editor-for-vue/v/5.1.12?activeTab=readme官网:Editor 1.安装pnpmadd@wangeditor/editor#或者npminstall@wangeditor/editor--save......
  • vue中activated
    vue组件在开了,关了,再开,created,mounted不会触发,activated会解决这个问题,给力。。。在Vue中,activated是组件生命周期函数之一,它会在组件被激活时调用。具体来说,当一个组件被插入到DOM中并且处于活动状态(例如,它是父组件的子组件),activated函数就会被调用。它通常用于执行一些操作......
  • vue移动鼠标在canvas上画不规则图形(整合别人的,增加了一些功能)
    1、draw_shape.js1/**2*绘制不规则多边形3*/45import{Message}from'element-ui'67exportfunctiondraw_test(cav,list){8//画布初始化9letctx=cav.getContext('2d')10ctx.strokeStyle='red'11......
  • vue运行中,常出错,是因为版本不一样,造成的
     这个是版本冲突造成的在package.json中添加 setNODE_OPTIONS=--openssl-legacy-provider  ......
  • vue实现用Element Table 展现数据T图
    vue实现用ElementTable展现数据T图,废话不多少,直接上干货<template> <div> <el-table:data="resultTable"style="width:100%"> <el-table-columnprop="id"label="日期"width="180"> </el-table......
  • React技术栈支援Vue项目,你需要提前了解的
    写在前面react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入,而vue的思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听,当属性变化的时候,响应式的更新对应的虚拟domreact的思路通过js来生成html,所以设计了jsx,还有通过js来操作css。vue是......
  • vue-element-admin 项目中,获取当前左侧菜单栏的Id
      找到 store/modules/permission.js(需要后端在返回的菜单中,添加Id):constpermission={state:{routes:[],addRoutes:[]},mutations:{SET_ROUTES:(state,routes)=>{state.addRoutes=routes......
  • vue3 和 element-plus 实现指定单元格编辑
    思路1.获取到指定单元格的位置2.通过状态来判断是否展示编辑步骤1.定义变量去确定行和列lettableRowEditId=ref(null),//控制可编辑的每一行lettableColumnEditIndex=ref(null),//控制可编辑的每一列2.在el-table上绑定单元格的点击事件cell-click(单击)cell......
  • vue3|知识点
    双向绑定Proxyproxy只支持对象ref创建的数据是空对象,绑定在其value属性上。监听属性监听对象watch(msg,func(new,old))监听对象的属性watch(()=>msg.name,func)watchEffect(func)自动监听已经引用的值......
  • 1、vue2.0的生命周期
    首先,组建从创建到销毁的过程就是它的生命周期。一共分为4个阶段,创建、挂载、更新以及销毁。第一个阶段:创建beforeCreate(){}//实例创建前,在这个函数内属性和方法都不能使用created(){}//实例已经初始化好了,也完成了数据挂载,可以修改数据、使用......