浏览代码

表格样式修改第一次

cuijunkai 7 月之前
父节点
当前提交
f021113506
共有 2 个文件被更改,包括 21 次插入14 次删除
  1. 20 13
      src/components/examine.vue
  2. 1 1
      src/views/HomeView.vue

+ 20 - 13
src/components/examine.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="table-container">
+  <div class="table_container">
     <div class="title_examine">
       <p style="font-size: 30px;font-weight: 400;margin-left: -91%;padding-top: 20px">账号审核</p>
     </div>
@@ -37,15 +37,15 @@
         <el-table :data="currentTableData" border style="width: 100%; background-color: white;"
           @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="50"></el-table-column>
-          <el-table-column prop="company" label="组织名称" width="200">
+          <el-table-column prop="company" label="组织名称" width="400">
             <template slot-scope="scope">{{ scope.row.company }}</template>
           </el-table-column>
-          <el-table-column prop="phone" label="电话/邮箱" width="240"></el-table-column>
-          <el-table-column prop="name" label="姓名" width="220" show-overflow-tooltip
+          <el-table-column prop="phone" label="电话/邮箱" width="400"></el-table-column>
+          <el-table-column prop="name" label="姓名" width="400" show-overflow-tooltip
             :label-class-name="'address-column'"></el-table-column>
-          <el-table-column prop="submission_time" label="提交时间" width="220"></el-table-column>
-          <el-table-column prop="remarks" label="备注" width="230"></el-table-column>
-          <el-table-column label="操作" width="248">
+          <el-table-column prop="submission_time" label="提交时间" width="400"></el-table-column>
+          <el-table-column prop="remarks" label="备注" width="400"></el-table-column>
+          <el-table-column label="操作" width="200">
             <template slot-scope="{ row }">
               <button @click="ajax_move_to_approved(row.userid, row.companyNumber)"
                 style="color: #308fff; background: none; border: none; cursor: pointer; margin-left: 25px;">通过</button>
@@ -675,10 +675,16 @@ export default {
 
 <style scoped>
 .content {
-  width: 1410px;
+  width: 100%;
   /* position: relative; */
 }
 
+/* 表格容器样式 */
+.table_container{
+  width: 97%;
+  padding: 30px;
+}
+
 /* 账号审核标题样式 */
 .title_examine {
   width: 100%;
@@ -740,13 +746,9 @@ export default {
   /* 设置透明度 */
 }
 
-.table-container {
-  padding: 30px;
-  /* 可选:添加一些内边距 */
-}
-
 .el-table {
   border: 1px solid #dcdfe6;
+  
   /* 设置表格边框 */
 }
 
@@ -1179,4 +1181,9 @@ hr {
   display: block !important;
   /* 或者 display: flex; 根据你的需求 */
 }
+/* 取消 ElTableColumn 的下方滚动条样式 */
+.el-table--scrollable-x .el-table__body-wrapper{
+  overflow-x: hidden !important;  /* 禁止水平滚动 */
+  overflow-y: auto;    /* 保留垂直滚动(如果需要) */
+}
 </style>

+ 1 - 1
src/views/HomeView.vue

@@ -97,7 +97,7 @@ body {
 }
 .table-container {
   flex-grow: 1; /* 使表格容器填满剩余空间 */
-  overflow: auto; /* 如果内容超出,添加滚动条 */
+  overflow: hidden; /* 如果内容超出,添加滚动条 */
 }
 .left{
   width: 150px;