样式

src/views/PurchasingCenter/SetPayPlan/index.vue

@@ -34,9 +34,9 @@
         size="mini"
         @row-click="searchContract"
         @expand-change="searchPlan">
-        <el-table-column type="expand">
+        <el-table-column label="详情" type="expand">
           <template slot-scope="props">
-            <el-table v-loading="" v-show="tableData01.length!==0" :data="tableData01" border size="mini">
+            <el-table v-show="tableData01.length!==0" :data="tableData01" class="subTableHeader" border size="mini" style="width: 450px">
               <el-table-column label="序号" align="center" type="index"/>
               <el-table-column label="计划付款日期" align="center">
                 <template slot-scope="scope">
@@ -55,7 +55,16 @@
               </el-table-column>
               <el-table-column label="操作" align="center">
                 <template slot-scope="scope">
-                  <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
+                  <el-tooltip effect="dark" content="删除" placement="top">
+                    <div style="display: inline-block">
+                      <el-button
+                        size="mini"
+                        type="text"
+                        icon="el-icon-delete"
+                        @click.stop="handleDelete(scope.row)"/>
+                    </div>
+                  </el-tooltip>
+                  <!--<el-button type="danger" size="mini" plain icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>-->
                 </template>
               </el-table-column>
             </el-table>
@@ -292,4 +301,19 @@ export default {
   .el-tag{
     margin: 0
   }
+  .subTableHeader {
+  th {
+    background: #8ff4ea !important;
+    color: black;
+  }
+
+  tr.el-table__row td {
+    background-color: #d8e5f6 !important;
+  }
+
+  tr.el-table__row.el-table__row--striped td {
+    background: #e9f0f9 !important;
+  }
+  }
+
 </style>