|  |  | 
 |  |  |   <GlobalWindow | 
 |  |  |     :visible.sync="visible" | 
 |  |  |     :confirm-working="isWorking" | 
 |  |  |     width="582px" | 
 |  |  |     width="620px" | 
 |  |  |     title="配置用户角色" | 
 |  |  |     @confirm="confirm" | 
 |  |  |   > | 
 |  |  |     <p class="tip" v-if="user != null">为用户 <em>{{user.realname}}</em> 配置角色</p> | 
 |  |  |     <p class="tip-warn"><i class="el-icon-warning"></i>提醒:角色配置后需重新登录后生效</p> | 
 |  |  |     <el-transfer | 
 |  |  |     <div class="df_center"> | 
 |  |  |       <el-transfer | 
 |  |  |       v-model="selectedIds" | 
 |  |  |       class="transfer" | 
 |  |  |       :titles="['未授权角色', '已授权角色']" | 
 |  |  |       :props="{ | 
 |  |  |         key: 'id', | 
 |  |  | 
 |  |  |       }" | 
 |  |  |       :data="roles"> | 
 |  |  |     </el-transfer> | 
 |  |  |     </div> | 
 |  |  |   </GlobalWindow> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | .transfer { | 
 |  |  |   height: 600px; | 
 |  |  |   width: 100%; | 
 |  |  |   display: flex; | 
 |  |  |   justify-content: center; | 
 |  |  |   align-items: center; | 
 |  |  |  | 
 |  |  |   ::v-deep .el-transfer-panel { | 
 |  |  |     flex: 1; | 
 |  |  |     height: 100%; | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   ::v-deep .el-transfer-panel__body { | 
 |  |  |     height: 500px; | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   ::v-deep .el-transfer-panel__list.is-filterable { | 
 |  |  |     height: 480px; | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | </style> |