vue分配权限时将原有的权限回显选中

在Vue应用中，当分配权限时，通常需要将用户已有的权限状态显示为已选择的状态。这可以通过数据绑定和条件渲染来实现。假设你有一个包含角色信息的数据对象，比如`userPermissions`数组，每个元素都有一个`permissionName`字段，你可以这样做：

<template>
  <div>
    <ul>
      <li v-for="(permission, index) in userPermissions" :key="index">
        <input type="checkbox" :name="permission.permissionName"
               :checked="permission.isGranted" @change="updatePermission(permission)">
        {{ permission.permissionName }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userPermissions: [], // 用户实际拥有的权限列表
    };
  },
  methods: {
    updatePermission(permission) {
      // 更新用户的权限状态
      this.$http.put('/api/users/update-permission', permission);
    },
  },
};
</script>

在这个例子中，`:checked="permission.isGranted"`会根据`isGranted`属性（通常是服务端返回的一个布尔值，表示该权限是否已被授予）控制复选框的默认选中状态。当用户勾选或取消勾选时，通过`@change="updatePermission(permission)"`事件触发更新用户权限的操作。