el-tree 这种数据格式怎么处理？

• Z时代
• 2024-02-23
• 分类：IT

最终要实现的效果：

后端传回来的数据，菜单下有相关联的按钮，选中这个按钮和菜单提交到后台：

[
    {
        "id": 203,
        "code": "003",
        "name": "根菜单",
        "orderNum": 3,
        "url": "/",
        "child": [
            {
                "id": 205,
                "code": "003002",
                "name": "二级菜单-2",
                "orderNum": 2,
                "url": "/admin/2-2",
                "child": [],
                "btnApiDate": [
                    {
                        "btnId": 59,
                        "btnName": "新增",
                        "btnCode": "kidjd",
                        "apiId": 332,
                        "apiUrl": "/admin/btn/repetition/check"
                    },
                    {
                        "btnId": 60,
                        "btnName": "删除",
                        "btnCode": "lasodj",
                        "apiId": 258,
                        "apiUrl": "erp:credit_management:financing:EXPORT"
                    }
                ]
            },
            {
                "id": 204,
                "code": "003001",
                "name": "二级菜单",
                "orderNum": 1,
                "url": "/admin/2",
                "child": [],
                "btnApiDate": [
                    {
                        "btnId": 49,
                        "btnName": "新增",
                        "btnCode": "btn-add",
                        "apiId": 335,
                        "apiUrl": "/admin/organization/tree/parent"
                    },
                    {
                        "btnId": 50,
                        "btnName": "删除",
                        "btnCode": "btn-delete",
                        "apiId": 269,
                        "apiUrl": "erp:book_manage:loan:EXPORT"
                    },
                    {
                        "btnId": 51,
                        "btnName": "编辑",
                        "btnCode": "btn-edit",
                        "apiId": 334,
                        "apiUrl": "/admin/btn/create"
                    },
                    {
                        "btnId": 61,
                        "btnName": "查看",
                        "btnCode": "btn-look",
                        "apiId": 261,
                        "apiUrl": "erp:potential_customer_manage:management:QUERY"
                    },
                    {
                        "btnId": 62,
                        "btnName": "批量删除",
                        "btnCode": "btn-deleteall",
                        "apiId": 338,
                        "apiUrl": "0000000000000"
                    },
                    {
                        "btnId": 63,
                        "btnName": "导出",
                        "btnCode": "btn-export",
                        "apiId": 333,
                        "apiUrl": "/admin/role/queryByUserName/{id}"
                    }
                ]
            }
        ]
    }
]

提交后台的数据（菜单可以多选，对应下面的按钮也可以多选且他们都是互不影响）

[{menuId:203, btnIds:[123,234]}],
[{menuId:204, btnIds:[230,101]}],

我的代码：

<el-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 }">
                  <tool-tip
                    :text="node.label"
                    class="custom-tree-node"
                    style="width: 130px"
                  ></tool-tip>
                  <span class="node-btns">
                    <el-checkbox-group v-model="checkedBtns" @change="handleCheckBtns">
                      <el-checkbox
                        v-for="(item, index) in data.btnApiDate"
                        :label="item.btnId"
                        :key="`btn-${index}`"
                        >{{ item.btnName }}</el-checkbox
                      >
                    </fin-checkbox-group>
                  </span>
                </span>
              </el-tree>

上面我的菜单和按钮复选框实现方式，按钮时使用多选框组来实现的。

提交后台的数据处理

updateOrSave() {
      const checkTreeIds = this.$refs.tree.getCheckedNodes(false, true);
      console.log('checkTreeIds', checkTreeIds);
      const btnIds = this.checkedBtns.map((v) => v.btnId);
      console.log('选择的按钮', btnIds);
      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({
            menuId,
            btnIds: btnIds,
          });
        }
      }
      createRoleAuthMenu(checkRoleTreeList).then(() => {
        this.$message.success('添加成功！');
        this.$store.dispatch('getUserMenus');
      });
    },

但是我这样的实现方式组合的数据是这个样（比如：A菜单不仅有他自己的选择的按钮也包含了B菜单下选择的按钮）:

[{menuId:203, btnIds:[123,234,230,101]}],
[{menuId:204, btnIds:[123,234,230,101]}],

求大佬们指点怎么写就能区分开

回答：

handleCheckBtns 触发的时候传入 当前选中的值，以及当前操作的菜单 key 就行了，
手动去修改对应的数据上面的值。并不是用同一个 checkedBtns 变量。

或者你偷懒也可以直接用 slot-scope 里面的 data 来绑定。

以上是 el-tree 这种数据格式怎么处理？ 的全部内容， 来源链接： utcz.com/p/933242.html