修改table组件样式

src/components/table/index.vue

@@ -1,26 +1,42 @@
 <template>
   <div class="table-layout">
-    <ul class="t-header" :class="{line:showLine}">
+    <!-- 表头 -->
+    <ul class="t-header" :class="{'bottom-line':showLine}">
+      <!-- 复选框 -->
       <li v-if="selection" class="check-cls"><span @click="lock=false,selectAll=!selectAll" class="fdcheck" :class="{check_active:selectAll}"></span></li>
-      <li v-for="(item,i) in header" :key="i" :style="{textAlign:item.textAlign,width:item.width ?item.width+'px':(100/header.length)+'%'}">
+      <!--  -->
+      <li v-for="(item,i) in header" :key="i" :style="{textAlign: item.textAlign, width:item.width ?item.width+'px':(100/header.length)+'%'}">
         <slot :data='item' name='header'></slot>
       </li>
     </ul>
+    <!-- 表格内容区域 -->
     <div class="t-con">
-      <ul class="t-item" active-txt :class="{line:showLine}" v-for="(item,i) in fixdata" :key="i">
+      <ul class="t-item" active-txt :class="{'bottom-line': showLine}" v-for="(item, i) in fixdata" :key="i">
+        <!-- 复选框 -->
         <li v-if="selection" class="check-cls" ><span @click="selectItem(item,i)" class="fdcheck" :class="{check_active:item.hasAuth}"></span></li>
-        <li :class="{themetxt:sub.fontweight}" v-for="(sub,j) in header" :key='j' :style="{textAlign:item.textAlign,width:sub.width ? sub.width+'px':(100/header.length)+'%'}">
+        <!--  -->
+        <li v-for="(sub,j) in header" :class="{ themetxt: sub.fontweight }" :key='j' :style="{textAlign:item.textAlign, width:sub.width ? sub.width+'px':(100/header.length)+'%'}">
           <slot :data='item[sub.key]' :item="item"  :sub='sub' name='item'></slot>
         </li>
       </ul>
     </div>
   </div>
 </template>
+
 <script>
 import { mapState } from 'vuex'
 
 export default {
-  props: ['data', 'header', 'selection', 'showLine'],
+  props: [
+    // 每一项可配置textAlign
+    'data',
+    // 表头数据：各列名称和格列的配置（fontweight: Boolean，某一列是否是关键列；canclick: Booean, 是否可进行各种操作；）。
+    'header',
+    // 是否显示复选框
+    'selection',
+    // 是否显示每行之间的分隔线
+    'showLine'
+  ],
   data () {
     return {
       innerW: window.innerWidth,
@@ -30,6 +46,7 @@ export default {
   },
   computed: {
     ...mapState({
+      // props中data中hasAuth一律写成false，即未选中。
       fixdata () {
         let data = this.data && this.data.map(item => {
           item.hasAuth = false

src/components/table/style.less

@@ -1,7 +1,7 @@
 .table-layout {
   width: 100%;
   color: #777;
-  font-size: 12px;
+  font-size: 14px;
 
   .check-cls {
     max-width: 20px;
@@ -13,14 +13,14 @@
     display: flex;
     align-items: center;
     width: 100%;
-    padding: 15px;
-    background: #F5F7FA;
+    padding: 15px 16px;
+    background-color: #F5F7FA;
+    color: #646566;
+    line-height: 19px;
 
     li {
       text-align: left;
-      padding-right: 10px;
-      display: inline-block;
-      margin-right: 10px;
+      margin-right: 20px;
     }
   }
 
@@ -29,12 +29,13 @@
       display: flex;
       align-items: center;
       width: 100%;
-      padding: 15px;
+      padding: 10px 0 10px 16px;
 
       &:hover {
         background: #F7F7F7;
 
         &[active-txt] {
+          // 关键列，会加粗显示且有hover效果。
           >.themetxt {
             span {
               word-break: break-all;
@@ -63,13 +64,9 @@
       }
     }
 
-    .line {
+    .bottom-line {
       min-height: 50px;
       border-bottom: 1px solid rgba(#202020, 0.1);
-
-      &:first-of-type {
-        border-top: 1px solid rgba(#202020, 0.1);
-      }
     }
   }
 }