修改JeecgBootVue3角色权限配置的默认选择方式

今天在使用jeecgboot-vue3开发时同事反馈角色权限配置选中父级没法全选，正常点击父级的选择框子级的选择框就会全选，但是它选择后就只有父级选中了，如下图所示：

最开始我以为是个bug，翻了下代码没有太清晰的脉络，访问了下全球最大的交友社区，在jeecgboot-vue3的issue里找到了答案，原来这不是个bug，官方考虑到了不同使用场景，所以可以自由选择要选择的形式

重点在层级独立与层级关联上，层级独立就是上述形式，需要手动一级一级选，从代码中也可以验证：

// 父组件路径：src/views/system/role/index.vue
// 子组件路径：src/views/system/role/components/RolePermissionDrawer.vue
// 子组件中选择框的点击事件
function onCheck(o) {
	console.log(o.checked);
    checkedKeys.value = o.checked ? o.checked : o;
}

通过打印结果得知，层级独立是以点击一级，就往数组中添加id的形式，如全选就是类似['a','b1','b2']这种形式，最终提交数组；

层级关联就是大家常见的形式，选择父级则子级全选，子级取消某一个则父级的选择取消，因此选择层级关联就可以达到想要的效果；

但是如果只是这样，完全没有写一篇文章的必要嘛，所以，已知默认是层级独立，想要全选需要手动一级一级选，可以通过点击右上方选择层级关联来改变选择方式，即只点击父级就可以全选，那把代码改成默认层级关联不就省一层操作了嘛

jeecgboot-vue3是封装了一个tree组件，通过props传入一个checkStrictly值，然后孙组件通过选择操作方式通过emit触发子组件change事件，将选择的值赋给从state.checkStrictly，state的初始值从props中取得，然后watchEffect响应式追踪依赖

// 父组件
// 路径：src/views/system/role/components/RolePermissonDrawer.vue
<BasicTree :checkStrictly="true"/>

// 子组件
// 路径：src/components/Tree/Tree.vue
const state = reactive<State>({
	checkStrictly: props.checkStrictly,
});
function onStrictlyChange(strictly: boolean) {
 state.checkStrictly = strictly;
}
watchEffect(() => {
  state.checkStrictly = props.checkStrictly;
});

//孙组件
// 路径：src/components/Tree/src/TreeHeader.vue
function handleMenuClick(e: MenuInfo) {
        const { key } = e;
        switch (key) {
          case ToolbarEnum.CHECK_STRICTLY:
            emit('strictly-change', false);
            break;
          case ToolbarEnum.CHECK_UN_STRICTLY:
            emit('strictly-change', true);
            break;
        }
      }
// 从此处也可以看出层级独立是true，层级关联是false      

所以要修改默认选择方式就很简单了，将通过props传递的checkStrictly设置为false即可，即

// 路径：src/views/system/role/components/RolePermissonDrawer.vue
<BasicTree :checkStrictly="false"/>

或者将孙组件中emit传递true、false调换，以上就是修改jeecgboot-vue3角色权限配置默认选择方式的方法