table style

src/views/PurchasingCenter/PurchaseContractSearch/index.vue

@@ -59,10 +59,41 @@
         :data="tableData1"
         size="mini"
         border
-        style="width: 100%;max-height: 300px;"
-        height="300px"
+        style="width: 100%;max-height: 350px;"
+        height="350px"
         highlight-current-row
         @row-click="searchTable2">
+        <el-table-column type="expand">
+          <template slot-scope="scope">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-row>
+                <el-form-item label="交货日期">
+                  {{ scope.row.交货日期 }}
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="支付日期">
+                  {{ scope.row.支付日期 }}
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="支付方式">
+                  {{ scope.row.支付方式 }}
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="开票信息">
+                  {{ scope.row.开票信息 }}
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="其他说明">
+                  {{ scope.row.其他说明 }}
+                </el-form-item>
+              </el-row>
+            </el-form>
+          </template>
+        </el-table-column>
         <el-table-column label="审批情况" align="center" min-width="100">
           <template slot-scope="scope">
             <el-tag v-if="scope.row.审批情况内容==='未审批'" type="warning" size="small">未审批</el-tag>
@@ -95,31 +126,6 @@
             {{ scope.row.合同总额 }}
           </template>
         </el-table-column>
-        <el-table-column label="交货日期" align="center" min-width="100">
-          <template slot-scope="scope">
-            {{ scope.row.交货日期 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="支付日期" align="center" min-width="150">
-          <template slot-scope="scope">
-            {{ scope.row.支付日期 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="支付方式" align="center" min-width="150">
-          <template slot-scope="scope">
-            {{ scope.row.支付方式 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="开票信息" align="center" min-width="150">
-          <template slot-scope="scope">
-            {{ scope.row.开票信息 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="其他说明" align="center" min-width="150">
-          <template slot-scope="scope">
-            {{ scope.row.其他说明 }}
-          </template>
-        </el-table-column>
         <el-table-column label="未通过原因" align="center" min-width="200">
           <template slot-scope="scope">
             {{ scope.row.未通过原因 }}
@@ -341,13 +347,7 @@ export default {
   }
 </style>
 <style>
-  .tableData{
-    height: 30px;
-  }
-  .el-table .adopt{
-    background: limegreen;
-  }
-  .el-table .NotThrough{
-    background: palevioletred;
+  .el-form-item {
+    margin: 0;
   }
 </style>