0

搞了一天没搞出来,求助

elementUI的tree似乎无法满足我的需求,我希望把sysOperAndMenus字段如果有值的话也显示成checkbox,相当于tree上的一部分,并且是横向的

所以我打算自己写,遇到的问题是

data:{
    "status":200,
    "message":"success",
    "data":{
        "id":1,
        "menuName":"菜单管理",
        "seq":1,
        "parentId":0,
        "gradeParentId":0,
        "isDisplay":0,
        "grade":1,
        "url":"",
        "route":null,
        "createTime":1559805595000,
        "creator":null,
        "updateTime":1568190075600,
        "updater":null,
        "parentMenuName":null,
        "gradeParentMenuName":null,
        "relyOn":null,
        "children":[
            {
                "id":6,
                "menuName":"权限管理",
                "seq":1,
                "parentId":1,
                "gradeParentId":1,
                "isDisplay":1,
                "grade":2,
                "url":"Permission",
                "route":null,
                "createTime":1432193334000,
                "creator":null,
                "updateTime":1568190112967,
                "updater":null,
                "parentMenuName":"菜单管理",
                "gradeParentMenuName":null,
                "relyOn":null,
                "children":[
                    {
                        "id":7,
                        "menuName":"角色管理",
                        "seq":1,
                        "parentId":6,
                        "gradeParentId":6,
                        "isDisplay":1,
                        "grade":3,
                        "url":"role",
                        "route":null,
                        "createTime":1432193334000,
                        "creator":null,
                        "updateTime":1568190095315,
                        "updater":null,
                        "parentMenuName":"权限管理",
                        "gradeParentMenuName":"菜单管理",
                        "relyOn":null,
                        "children":[
                            {
                                "id":8,
                                "menuName":"删除角色",
                                "seq":1,
                                "parentId":7,
                                "gradeParentId":7,
                                "isDisplay":0,
                                "grade":4,
                                "url":"/user/removeRoles",
                                "route":"/user/removeRole",
                                "createTime":1436340053000,
                                "creator":null,
                                "updateTime":1568190096993,
                                "updater":null,
                                "parentMenuName":"角色管理",
                                "gradeParentMenuName":"权限管理",
                                "relyOn":null,
                                "children":null,
                                "oper":"删除",
                                "isDefault":0,
                                "sysOperAndMenus":[

                                ]
                            },
                            {
                                "id":10,
                                "menuName":"修改权限",
                                "seq":2,
                                "parentId":7,
                                "gradeParentId":7,
                                "isDisplay":0,
                                "grade":4,
                                "url":"/user/modifyRoleRigths",
                                "route":"/user/modifyRoleRigths",
                                "createTime":1432193334000,
                                "creator":null,
                                "updateTime":1568190119242,
                                "updater":null,
                                "parentMenuName":"角色管理",
                                "gradeParentMenuName":"权限管理",
                                "relyOn":null,
                                "children":null,
                                "oper":"修改",
                                "isDefault":0,
                                "sysOperAndMenus":[

                                ]
                            },
                            {
                                "id":15,
                                "menuName":"添加角色",
                                "seq":3,
                                "parentId":7,
                                "gradeParentId":7,
                                "isDisplay":0,
                                "grade":4,
                                "url":"/user/addOrEditRole",
                                "route":"/user/addRole",
                                "createTime":1432193334000,
                                "creator":null,
                                "updateTime":1568190121864,
                                "updater":null,
                                "parentMenuName":"角色管理",
                                "gradeParentMenuName":"权限管理",
                                "relyOn":null,
                                "children":null,
                                "oper":"新建",
                                "isDefault":0,
                                "sysOperAndMenus":[

                                ]
                            }
                        ],
                        "oper":null,
                        "isDefault":0,
                        "sysOperAndMenus":[
                            {
                                "parentId":7,
                                "oper":"修改",
                                "menus":[
                                    10
                                ]
                            },
                            {
                                "parentId":7,
                                "oper":"删除",
                                "menus":[
                                    8
                                ]
                            },
                            {
                                "parentId":7,
                                "oper":"新建",
                                "menus":[
                                    15
                                ]
                            }
                        ]
                    },
                    {
                        "id":18,
                        "menuName":"用户管理",
                        "seq":2,
                        "parentId":6,
                        "gradeParentId":6,
                        "isDisplay":1,
                        "grade":3,
                        "url":"account",
                        "route":null,
                        "createTime":1432193334000,
                        "creator":null,
                        "updateTime":1568190102689,
                        "updater":null,
                        "parentMenuName":"权限管理",
                        "gradeParentMenuName":"菜单管理",
                        "relyOn":null,
                        "children":[
                            {
                                "id":19,
                                "menuName":"添加用户ip区间",
                                "seq":1,
                                "parentId":18,
                                "gradeParentId":18,
                                "isDisplay":0,
                                "grade":4,
                                "url":"/user/addIpRange",
                                "route":"/user/addIpRange",
                                "createTime":1432193334000,
                                "creator":null,
                                "updateTime":1568190105795,
                                "updater":null,
                                "parentMenuName":"用户管理",
                                "gradeParentMenuName":"权限管理",
                                "relyOn":null,
                                "children":null,
                                "oper":"指定ip",
                                "isDefault":0,
                                "sysOperAndMenus":[

                                ]
                            },
                            {
                                "id":20,
                                "menuName":"登录",
                                "seq":2,
                                "parentId":18,
                                "gradeParentId":18,
                                "isDisplay":0,
                                "grade":4,
                                "url":"/user/login",
                                "route":"/user/login",
                                "createTime":1432193334000,
                                "creator":null,
                                "updateTime":1568190110253,
                                "updater":null,
                                "parentMenuName":"用户管理",
                                "gradeParentMenuName":"权限管理",
                                "relyOn":null,
                                "children":null,
                                "oper":"登录",
                                "isDefault":1,
                                "sysOperAndMenus":[

                                ]
                            }
                        ],
                        "oper":null,
                        "isDefault":0,
                        "sysOperAndMenus":[
                            {
                                "parentId":18,
                                "oper":"指定ip",
                                "menus":[
                                    19
                                ]
                            }
                        ]
                    }
                ],
                "oper":null,
                "isDefault":0,
                "sysOperAndMenus":[

                ]
            }
        ],
        "oper":null,
        "isDefault":0,
        "sysOperAndMenus":[

        ]
    },
    "type":null,
    "log":null
}
<template>
  <div class="gs-tree">
    <ul>
      <li v-for="(item, index) in data" :key="index">
        <el-checkbox
          v-if="item.isDisplay"
          v-model="item.checkAll"
          :indeterminate="isIndeterminate"
          @change="((val) => { handleCheckAllChange(item, val) })"
        >
          {{ item.menuName }} {{ item.isDisplay }}
        </el-checkbox>
        <div v-if="item.sysOperAndMenus && item.sysOperAndMenus.length" class="horizontal-group">
          <el-checkbox-group v-model="item.checked" @change="((val) => { handleCheckedChange(item, val) })">
            <el-checkbox v-for="(list, i) in item.sysOperAndMenus" :key="i" :label="list.oper">
              <span>{{ list.oper }}</span>
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <ul v-if="item.children">
          <Tree :data="item.children" />
        </ul>
      </li>
    </ul>
  </div>
</template>

渲染成树形结构了,但是我不知道v-model怎么绑定值,因为在循环里,所以点击一个就全都选中了,我怎么做单选全选啊?求思路

如图:

clipboard.png

样式不用管我自己调,我是没思路做选中全选,求指教

2 个回答
0

已采纳

第一过滤条件可以通过数据过滤来完成,在加载之前就过滤数据当isDisplay=0的数据就不要;
第二个过滤条件就用树的渲染

clipboard.png

0

mymenu.vue
<div v-if="list.isDisplay">

   {{list.menuName}}
   <div v-for="sysOperAndMenus in list.sysOperAndMenus">
      <input type="checkbox" />{{sysOperAndMenus.oper}}
   </div>
   <template v-for="item in list.children" >
      <mymenu :list ="item"></mymenu>
   </template>

</div>

撰写答案

推广链接