Vue.js中如何对比两个数组对象并为第一个数组填充数据

实现方案 #

核心思路是通过合并默认权限与用户权限生成动态渲染的数据源，完全不需要硬编码适配新增权限，具体实现步骤如下：

1. 实现逻辑说明

首先将userPermissions转换为以permission_name为键的映射表，实现权限项的O(1)快速匹配；再遍历全量默认权限defaultPermissions，自动合并对应用户的权限值，无匹配时保留默认未授权（值为0）的状态。后续新增权限仅需在defaultPermissions中添加配置即可，无需修改其他逻辑。

2. 代码示例

JS逻辑（以Vue为例）

如果仅需权限展示，用计算属性实现即可：

computed: {
  // 合并后的最终权限渲染列表
  mergedPermissions() {
    // 构造用户权限映射表
    const userPermMap = new Map(this.userPermissions.map(item => [item.permission_name, item]))
    // 合并默认权限和用户权限
    return this.defaultPermissions.map(defaultItem => {
      const userPerm = userPermMap.get(defaultItem.permission_name)
      return userPerm ? { ...defaultItem, ...userPerm } : { ...defaultItem }
    })
  }
}

如果需要支持权限编辑后提交，可将合并逻辑改为初始化时赋值给响应式变量：

data() {
  return {
    mergedPermissions: []
  }
},
methods: {
  initPermList() {
    const userPermMap = new Map(this.userPermissions.map(item => [item.permission_name, item]))
    this.mergedPermissions = this.defaultPermissions.map(defaultItem => {
      const userPerm = userPermMap.get(defaultItem.permission_name)
      return userPerm ? { ...defaultItem, ...userPerm } : { ...defaultItem }
    })
  }
},
// 接口获取到两个权限数组后调用初始化方法
created() {
  this.initPermList()
}

模板调整

把表格遍历的数据源替换为合并后的权限列表，同时修正原模板中字段名的笔误（resourceName改为permission_name）：

<tr v-for="(item,index) in mergedPermissions" :key="`perm_${index}`">
    <td> {{ item.permission_name }}</td>
    <td> <input type="checkbox" v-model="item.read" class="form-control"/></td>
    <td> <input type="checkbox" v-model="item.write" class="form-control"/></td>
    <td> <input type="checkbox" v-model="item.update" class="form-control"/></td>
    <td> <input type="checkbox" v-model="item.delete" class="form-control"/></td>
</tr>

内容的提问来源于stack exchange，提问作者Anji