样式优化

src/pages/role/index.vue

@@ -3,14 +3,14 @@
     <div class="btn-bar">
       <el-button v-if="hasCreate" type="primary" size="mini" @click="dialogVisible = true">新建角色</el-button>
     </div>
-    <el-table :data="tableData" size="mini" style="width: 100%">
+    <el-table :data="tableData" size="small" height="calc(100% - 38px)" style="width: 100%">
       <el-table-column label="角色名称" min-width="120" prop="name" />
       <el-table-column label="角色描述" min-width="150" prop="description" />
       <el-table-column label="操作" min-width="130">
         <template slot-scope="scope" v-if="scope.row.name !== 'superAdmin'">
-          <el-button v-if="hasUpdate" type="text" @click="handleEdit(scope.row)">编辑角色</el-button>
-          <el-button v-if="hasPermit" type="text" @click="handlePermission(scope.row)">权限配置</el-button>
-          <el-button v-if="hasDelete" type="text" @click="handleDelete(scope.row)">删除</el-button>
+          <el-button v-if="hasUpdate" type="text" size="small" @click="handleEdit(scope.row)">编辑角色</el-button>
+          <el-button v-if="hasPermit" type="text" size="small" @click="handlePermission(scope.row)">权限配置</el-button>
+          <el-button v-if="hasDelete" type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>

src/pages/student/index.vue

@@ -6,11 +6,11 @@
       </template>
       <!-- 图片 -->
       <template v-slot:table_img="{ row }">
-        <img :src="row.head_img" height="40" style="max-width:60px;"/>
+        <img v-if="row.head_img" :src="row.head_img" height="60" width="60"/>
       </template>
       <!-- Id -->
       <template v-slot:table_id="scope">
-        <span class="details-handle" @click="handleDetails(scope.row)">{{ scope.row.student_number }}</span>
+        <span class="details-handle" style="color:#409EFF" @click="handleDetails(scope.row)">{{ scope.row.student_number }}</span>
       </template>
       <!-- 状态 -->
       <template v-slot:status="{ row }">
@@ -150,6 +150,9 @@ export default {
     hasSaveCourse() {
       return this.permissions.includes('v1/student/save-course')
     },
+    onlyView() {
+      return !this.hasImport && !this.hasExport && !this.hasDelete && !this.hasViewInfo && !this.hasViewDegree && !this.hasViewCourse
+    },
     tableOptions() {
       return {
         remote: {
@@ -178,7 +181,20 @@ export default {
             }
           },
           { prop: 'age', label: '年龄', minWidth: '60px' },
-          { prop: 'id_number', label: '身份证号', minWidth: '150px' },
+          {
+            prop: 'id_number',
+            label: '身份证号',
+            minWidth: '150px',
+            computed: ({ row }) => {
+              let id = row.id_number
+              console.log(this.onlyView)
+              if (this.onlyView) {
+                id = id.substr(0, 6) + '********' + id.substr(14)
+                console.log(id)
+              }
+              return id
+            }
+          },
           { prop: 'mobile', label: '电话号码', minWidth: '130px' },
           { prop: 'email', label: '邮箱地址', minWidth: '150px' },
           {
@@ -198,6 +214,9 @@ export default {
       }
     }
   },
+  created() {
+    console.log(this.onlyView)
+  },
   methods: {
     handleSelectionChange(val) {
       this.multipleSelection = val.map(item => item.id)

src/pages/user/index.vue

@@ -15,7 +15,7 @@
       </div>
       <el-button v-if="hasCreate" type="primary" size="mini" @click="drawerVisible = true">新增授权</el-button>
     </div>
-    <el-table :data="tableData" size="mini" style="width: 100%">
+    <el-table :data="tableData" size="mini" style="width: 100%" height="calc(100% - 42px)">
       <el-table-column label="用户ID" min-width="120" prop="userId" />
       <el-table-column label="用户姓名" min-width="150" prop="userName" />
       <el-table-column label="用户昵称" min-width="150" prop="nickname" />
@@ -23,7 +23,7 @@
       <el-table-column label="操作" min-width="130">
         <template slot-scope="scope" v-if="scope.row.name !== 'superAdmin'">
           <!-- <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button> -->
-          <el-button v-if="hasDelete" type="text" @click="handleDelete(scope.row)">删除</el-button>
+          <el-button v-if="hasDelete" type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>