antd树形结构回显示递归判断子节点是否选中和删除父节点


     treeData.data = setTreeData1(res.data.data.permissionList);
      treeData.checkedKeys=[]       //每次进来清空数据
      treeData.oneTree=[]
      // treeData.checkedKeys=checkedKeys.checkedKeys
      nextTick(()=>{

        let userMenuList:any=[]
          if(res.data.data){
            res.data.data.permissionList.forEach((item:any)=>{
              if(item.havePermission==true){
                userMenuList.push(item.permissionId)
                treeData.oneTree.push(item.permissionId)
              }
            })
            findAllChildren(treeData.data,userMenuList)
          }
        }
        )
    };
//userMenuList 所有选中的节点数据
//data 树结构
    const  findAllChildren=(data:any,userMenuList:any)=> {
      let mainMenuList:any=[]
      data.forEach((item:any, index:any) => {
        if(item.children){
          if(item.children.length !== 0) {
             for (let i = 0; i < userMenuList.length; i++) {
               if (item.permissionId == (userMenuList[i])) {
                 mainMenuList.push(userMenuList[i])
                 userMenuList.splice(i, 1);
               }
             }
            findAllChildren(item.children,userMenuList);
          }
        }
      })
      treeData.checkedKeys=userMenuList
    }

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过以下步骤实现: 1. 在Vue组件中引入antdTree组件。 2. 在数据中定义不同场景需要展示的Tree节点数据。 3. 使用v-if或者v-show指令来控制不同场景下Tree节点的展示。 4. 在切换场景时,切换数据中的节点数据即可。 下面是一个示例代码: ```html <template> <div> <el-radio-group v-model="currentScene" @change="onSceneChange"> <el-radio :label="'scene1'">场景1</el-radio> <el-radio :label="'scene2'">场景2</el-radio> <el-radio :label="'scene3'">场景3</el-radio> </el-radio-group> <div v-show="currentScene === 'scene1'"> <a-tree :tree-data="treeData1"></a-tree> </div> <div v-show="currentScene === 'scene2'"> <a-tree :tree-data="treeData2"></a-tree> </div> <div v-show="currentScene === 'scene3'"> <a-tree :tree-data="treeData3"></a-tree> </div> </div> </template> <script> import { Tree } from 'ant-design-vue'; export default { components: { 'a-tree': Tree }, data() { return { currentScene: 'scene1', treeData1: [ { title: 'Node 1', key: '1' }, { title: 'Node 2', key: '2' }, { title: 'Node 3', key: '3' }, ], treeData2: [ { title: 'Node A', key: 'A' }, { title: 'Node B', key: 'B' }, { title: 'Node C', key: 'C' }, ], treeData3: [ { title: 'Apple', key: 'apple' }, { title: 'Banana', key: 'banana' }, { title: 'Cherry', key: 'cherry' }, ] } }, methods: { onSceneChange(value) { this.currentScene = value; } } } </script> ``` 在上面的代码中,我们首先导入了antdTree组件,然后在数据中定义了三种不同的场景需要展示的Tree节点数据,然后使用v-show指令根据不同场景来展示不同的Tree结构。 最后,我们通过一个radio按钮来控制场景的切换,并在onSceneChange调函数中更新当前的场景值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值