极客观点
项目管理
HarmonyOS
搞了一天没搞出来，求助
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怎么绑定值，因为在循环里，所以点击一个就全都选中了，我怎么做单选全选啊？求思路
如图：
样式不用管我自己调，我是没思路做选中全选，求指教
第一过滤条件可以通过数据过滤来完成，在加载之前就过滤数据当isDisplay=0的数据就不要；
第二个过滤条件就用树的渲染