소스 검색

'调整table组件样式'

lin-xin 7 년 전
부모
커밋
38a5d315aa
2개의 변경된 파일15개의 추가작업 그리고 8개의 파일을 삭제
  1. 13 6
      src/components/page/BaseTable.vue
  2. 2 2
      static/css/main.css

+ 13 - 6
src/components/page/BaseTable.vue

@@ -15,23 +15,23 @@
                 <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
                 <el-button type="primary" icon="search" @click="search">搜索</el-button>
             </div>
-            <el-table :data="data" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
-                <el-table-column type="selection" width="55"></el-table-column>
+            <el-table :data="data" border class="table" ref="multipleTable" @selection-change="handleSelectionChange">
+                <el-table-column type="selection" width="55" align="center"></el-table-column>
                 <el-table-column prop="date" label="日期" sortable width="150">
                 </el-table-column>
                 <el-table-column prop="name" label="姓名" width="120">
                 </el-table-column>
                 <el-table-column prop="address" label="地址" :formatter="formatter">
                 </el-table-column>
-                <el-table-column label="操作" width="180">
+                <el-table-column label="操作" width="180" align="center">
                     <template slot-scope="scope">
-                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
-                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+                        <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>
             <div class="pagination">
-                <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">
+                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">
                 </el-pagination>
             </div>
         </div>
@@ -202,4 +202,11 @@
         font-size: 16px;
         text-align: center
     }
+    .table{
+        width: 100%;
+        font-size: 14px;
+    }
+    .red{
+        color: #ff0000;
+    }
 </style>

+ 2 - 2
static/css/main.css

@@ -34,7 +34,7 @@ a {
 .content {
     width: auto;
     height: 100%;
-    padding: 40px;
+    padding: 10px;
     overflow-y: scroll;
     box-sizing: border-box;
 }
@@ -51,7 +51,7 @@ a {
 }
 
 .crumbs {
-    margin-bottom: 20px;
+    margin: 10px 0;
 }
 
 .pagination {