:zap: 优化代码。添加字段宽度，树节点过长添加右滚动条

src/const/crud/admin/sys-social-details.js

@@ -23,6 +23,7 @@ export const tableOption = {
   menuAlign: 'center',
   align: 'center',
   viewBtn: true,
+  labelWidth: 120,
   column: [{
     label: 'ID',
     prop: 'id',

src/views/admin/role/index.vue

@@ -85,7 +85,9 @@
     </basic-container>
     <el-dialog
       :visible.sync="dialogPermissionVisible"
+      :close-on-click-modal="false"
       title="分配权限">
+      <div class="dialog-main-tree">
       <el-tree
         ref="menuTree"
         :data="treeData"
@@ -98,13 +100,18 @@
         highlight-current
         show-checkbox
         default-expand-all/>
-      <div
-        slot="footer"
+      </div>
+      <div slot="footer"
         class="dialog-footer">
         <el-button
           type="primary"
+                   size="small"
           @click="updatePermession(roleId)">更 新
         </el-button>
+        <el-button
+	        type="default"
+                   size="small"
+          @click="cancal()">取消</el-button>
       </div>
     </el-dialog>
   </div>
@@ -197,6 +204,9 @@ export default {
     handleUpdate(row, index) {
       this.$refs.crud.rowEdit(row, index)
     },
+      cancal () {
+        this.dialogPermissionVisible = false;
+      },
     handlePermission(row) {
       fetchRoleTree(row.roleId)
         .then(response => {
@@ -286,3 +296,22 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+  .el-dialog__wrapper {
+  .el-dialog {
+    width: 61% !important;
+  .dialog-main-tree {
+    max-height: 400px;
+    overflow-y: auto;
+  }
+  }
+  .el-form-item__label {
+    width: 20% !important;
+    padding-right: 20px;
+  }
+  .el-form-item__content {
+    margin-left: 20% !important;
+  }
+  }
+</style>