18910140161

laravel获取后端的数组数据如何回显到树形插件中?

顺晟科技

2022-09-15 20:41:29

250

各位大佬:
我正在使用iview的tree组件写权限列表的功能
以下是数据:

[
  {
    "title": "所有权限",
    "permissionName": "all",
    "checked":false,
    "expand": true,
    "children": [
      {
        "title": "用户管理",
        "permissionName": "users",
        "checked":false,
        "expand": true,
        "children": [
          {
            "title": "添加用户",
            "permissionName": "users.add",
            "checked":false
          },
          {
            "title": "删除用户",
            "permissionName": "users.delete",
            "checked":false
          },
          {
            "title": "编辑用户",
            "permissionName": "users.edit",
            "checked":false
          },
          {
            "title": "拉黑用户",
            "permissionName": "users.blacklist",
            "checked":false
          }
        ]
      },
      {
        "title": "商户管理",
        "permissionName": "vendor",
        "checked":false,
        "expand": true,
        "children": [
          {
            "title": "添加商户",
            "permissionName": "vendor.add",
            "checked":false
          },
          {
            "title": "删除商户",
            "permissionName": "vendor.delete",
            "checked":false
          },
          {
            "title": "编辑商户",
            "permissionName": "vendor.edit",
            "checked":false
          }
        ]
      }
    ]
  }
]

那么现在后端返回了选择的数组,类似这样:

["users","users.add","users.delete","users.edit","users.blacklist"]

很显然服务器返回的数组是对应的树形数据中的permissionName

下面的问题是:
vue如何操作才能使得返回的数据回显到树形中,也就是通过,例如:permissionName = “users”的时候 checked的值改变为true

感谢各位!!!

正常用户的权限数据 是后端返回给你的, 不是仅仅返回“['users', 'users.add']”

找你的后端要数据. 数据都丢失了, 前端怎么可能还原出来. 虽然看起来是用.分隔的字符串, 但又没有确定.

image.png
image.png
那你就遍历啊 遍历某一项permissionName === 返回数组的某一项 然后把这一项的 checked=true
遍历完 把tree的数据源换成你遍历后的 不就可以了?

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航