修改数据权限框的样式

src/views/system/role/index.vue

@@ -100,7 +100,7 @@
             <span>{{ scope.row.createDate | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" class-name="small-padding fixed-width">
+        <el-table-column label="操作" class-name="small-padding fixed-width" width="240px">
           <template slot-scope="scope">
             <el-button
               v-hasPermi="['sys:role:update']"
@@ -181,8 +181,10 @@
     </el-dialog>
 
     <!-- 分配角色数据权限对话框 -->
-    <el-dialog title="数据权限信息" :visible.sync="openDataScope" width="500px" append-to-body>
-      <el-form :model="form" label-width="100px">
+    <el-dialog class="roleDialog" title="数据权限信息" :visible.sync="openDataScope" width="900px" append-to-body>
+      <el-row>
+        <el-col style="width: 49%">
+          <el-form  ref="form" :model="form" :rules="rules" label-width="70px">
         <el-form-item label="角色名称">
           <el-input v-model.trim="form.roleName" placeholder="请输入角色名称" show-word-limit :maxlength="30" :disabled="true" />
         </el-form-item>
@@ -209,10 +211,14 @@
         </el-table-column>
         </el-table>
       </el-form>
-      <div class="dividerStyle">
-        <el-divider direction="vertical" />
+        </el-col>
+        <el-col style="width: 1%">
+        <div class="dividerStyle">
+        <el-divider direction="vertical"/>
       </div>
-      <el-form  :model="form" label-width="80px" style="width:60%">
+        </el-col>
+        <el-col style="width: 49%">
+        <el-form :model="form" label-width="80px">
         <el-form-item label="菜单名称" prop="roleName">
           <el-input v-model="form.menuName" placeholder="未选择菜单名称" disabled/>
         </el-form-item>
@@ -243,6 +249,8 @@
           ></el-tree>
         </el-form-item>
       </el-form>
+        </el-col>
+      </el-row>
       <div slot="footer" class="dialog-footer">
         <el-button @click="cancelDataScope">取 消</el-button>
         <el-button type="primary" @click="submitDataScope">确 定</el-button>
@@ -300,8 +308,8 @@ export default {
       // 数据范围选项
       dataScopeOptions: [
         {
-          dictValue: '1',
-          dictLabel: '全部数据权限'
+          value: '1',
+          label: '全部数据权限'
         },
         {
           value: '2',
@@ -665,16 +673,8 @@ export default {
       margin-left: 15px;
     }
   }
-  .roleDialog {
-    .el-dialog__body {
-      display: flex;
-    }
-  }
-  .dividerStyle {
-    .el-divider--vertical {
-      height: 100%;
-      margin-left: 20px;
-      width: 2px;
-    }
+  .el-divider--vertical{
+    height: 12em;
+    width: 4px;
   }
 </style>