vue 菜单和按钮授权数据组合问题？

Question

页面代码：

<fin-tree
              ref="tree"
              style="min-height: 300px"
              show-checkbox
              :data="treeData"
              :props="treeProps"
              node-key="id"
              :check-strictly="checkStrictly"
              :default-expand-all="true"
              :default-checked-keys="checkedMenuIds"
              @check="handleBucketClick"
            >
              <span class="node-container" slot-scope="{ node, data }">
                <span class="node-text">{{ node.label }}</span>
                <span class="node-btns">
                  <fin-checkbox-group v-model="checkedBtns" @change="handleCheckBtns">
                    <fin-checkbox
                      v-for="(item, index) in data.btnApiDate"
                      :label="item.btnId"
                      :key="`btn-${index}`"
                      >{{ item.btnName }}</fin-checkbox
                    >
                  </fin-checkbox-group>
                </span>
              </span>
            </fin-tree>

向后台发送请求

updateOrSave() {
      const checkTreeIds = this.$refs.tree.getCheckedNodes(false, true);
      console.log('checkTreeIds', checkTreeIds);
      const btnIds = this.checkedBtns.map((v) => v.btnId);
      const checkRoleTreeList = [];
      if (checkTreeIds == false) {
        checkRoleTreeList.push({
          roleId: this.form.roleId,
          appId: this.form.appId,
        });
      } else {
        for (let j = 0; j < checkTreeIds.length; j++) {
          const { id: menuId } = checkTreeIds[j];
          checkRoleTreeList.push({
            roleId: this.form.roleId,
            menuId,
            btnid: btnids,
            appId: this.form.appId,
          });
        }
      }
      console.log('checkRoleTreeList', checkRoleTreeList);
      createRoleAuthMenu(checkRoleTreeList).then(() => {
        this.$message.success('添加菜单按钮成功！');
        this.$store.dispatch('getUserMenus');
      });
    },

我上面的写法成了不管你选择那一个菜单，只要选的按钮都会绑定到一起，就区分不开是哪个菜单下绑定按钮。

要求提交到后端数据格式：

[{roleId: 1, appId: 73, menuId:203, btnIds:[123,234]}],
[{roleId: 1, appId: 73, menuId:204, btnIds:[230,101]}],

需求就是：

勾选当前菜单，并勾选当前菜单下拥有的按钮组成新的数据提交给后台，
各菜单之间不会互相影响，也就是各选各的。

Answer 1

<fin-。。。是什么组件库？没有使用过。
现在的问题应该是勾选其中一个，会自动连其他的也勾选上是吗？
看贴出来的代码没看出问题。如果组件使用没问题的话。。。

说下排查思路吧：按照需求，是将被勾选的条目传给后端。而数据和页面是绑定的，所以只要找到数组有哪些地方会被被改变基本就可以找到问题。

一，检查页面里绑定的 checkedBtns 还有什么地方用到了，有没有做监听，或者计算属性。还有就是各个生命周期钩子里，比如 updated() 是不是在这些地方被处理了。
二、排查下 你的change 函数 handleCheckBtns，当你勾选其中某一个的时候具体都执行了什么操作，以及会不会是相应的连锁动作造成的改变了checkedBtns 。
三、检查下 你的展示的 data.btnApiDate 本身有没有问题(比如重复的条目之类的。。。)。

可以借助 vue_devtools 工具，总之组件使用不出问题的话，只要找到 checkedBtns 是在哪里被改变的，问题原因基本就明确了。