table组件添加单元格hover时显示的功能

src/components/table/index.vue

@@ -15,7 +15,7 @@
         <!-- 复选框 -->
         <li v-if="selection" class="check-cls" ><span @click="selectItem(item,i)" class="fdcheck" :class="{check_active:item.hasAuth}"></span></li>
         <!--  -->
-        <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)+'%'}">
+        <li v-for="(sub,j) in header" :class="{ themetxt: sub.fontweight, showWhenHover: sub.showWhenHover }" :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>
@@ -28,9 +28,15 @@ import { mapState } from 'vuex'
 
 export default {
   props: [
-    // 每一项可配置textAlign
     'data',
-    // 表头数据：各列名称和格列的配置（fontweight: Boolean，某一列是否是关键列；canclick: Booean, 是否可进行各种操作；）。
+    /**
+     * 表头数据：各列名称和配置
+     * fontweight: Boolean，某一列是否是关键列,会加粗显示
+     * showWhenHover: Boolean,是否只在hover到这一行时才显示这一列在该行的数据
+     * canclick: Booean, 是否可点击进行各种操作
+     * width: Number,该列宽度
+     * textAlign: css属性值
+     */
     'header',
     // 是否显示复选框
     'selection',

src/components/table/style.less

@@ -30,10 +30,14 @@
       align-items: center;
       width: 100%;
       padding: 10px 0 10px 16px;
-
+      .showWhenHover {
+        visibility: hidden;
+      }
       &:hover {
         background: #F7F7F7;
-
+        .showWhenHover {
+          visibility: visible;
+        }
         &[active-txt] {
           // 关键列，会加粗显示且有hover效果。
           >.themetxt {