若依vue中用户管理列表中添加角色列

若要在Vue中的用户管理列表中添加角色列，可以按照以下步骤进行操作：

1. 在Vue组件中的data属性中添加一个roles数组，用于存储角色信息，例如：

data() {
  return {
    users: [], // 用户列表数据
    roles: [], // 角色列表数据
    // 其他数据
  }
}

2. 在Vue组件的created钩子函数中，通过API调用获取角色列表数据，并将结果存储到roles数组中，例如：

created() {
  // 获取角色列表数据
  axios.get('/api/roles')
    .then(response => {
      this.roles = response.data
    })
    .catch(error => {
      console.log(error)
    })
}

3. 在用户管理列表中添加一列角色列，并将角色信息显示出来，例如：

<table>
  <thead>
    <tr>
      <th>用户名</th>
      <th>邮箱</th>
      <th>角色</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="user in users" :key="user.id">
      <td>{{ user.username }}</td>
      <td>{{ user.email }}</td>
      <td>{{ getRoleName(user.role_id) }}</td>
      <td>
        <!-- 操作按钮 -->
      </td>
    </tr>
  </tbody>
</table>

其中，getRoleName方法用于根据角色ID获取对应的角色名称，例如：

methods: {
  getRoleName(roleId) {
    const role = this.roles.find(role => role.id === roleId)
    return role ? role.name : ''
  }
}

这样，在Vue中的用户管理列表中就可以显示角色信息了。