diff --git a/src/views/users/User/UserDetail/UserInfo.vue b/src/views/users/User/UserDetail/UserInfo.vue
index 1455dd354..0f5f97867 100644
--- a/src/views/users/User/UserDetail/UserInfo.vue
+++ b/src/views/users/User/UserDetail/UserInfo.vue
@@ -228,7 +228,12 @@ export default {
         },
         {
           key: this.$t('users.Role'),
-          value: this.object.total_role_display
+          formatter: (item, val) => {
+            const org_roles_display = this.object.org_roles_display
+            const system_roles_display = this.object.system_roles_display
+            const roles_display = org_roles_display.split(', ').concat(system_roles_display.split(', '))
+            return <span> { roles_display.join(' | ') } </span>
+          }
         },
         {
           key: this.$t('users.MFA'),