update: show summary in products table

TehranJS-Workshops · Sep 17, 2018 · fef4705 · fef4705
1 parent dc5b453
commit fef4705
Showing 1 changed file with 4 additions and 8 deletions.
diff --git a/src/components/products.vue b/src/components/products.vue
@@ -2,16 +2,12 @@
   <el-main>
     <h2>Products</h2>
 
-    <el-table :data="products" style="width: 100%" stripe border height="800">
+    <el-table :data="products" style="width: 100%" stripe border height="800" show-summary>
       <el-table-column prop="title" label="Title" width="180"></el-table-column>
       <el-table-column prop="desc" label="Description"></el-table-column>
-      <el-table-column prop="basePrice" label="Base price" width="120">
-        <template slot-scope="scope">${{ scope.row.basePrice }}</template>
-      </el-table-column>
-      <el-table-column prop="price" label="Price" width="120">
-        <template slot-scope="scope">${{ scope.row.price }}</template>
-      </el-table-column>
-      <el-table-column prop="stocked" label="Stocked" width="120" :filters="[{ text: 'Yes', value: true }, { text: 'No', value: false }]" :filter-method="filterTag" filter-placement="bottom-end">
+      <el-table-column prop="basePrice" label="Base price ($)" width="150" sortable></el-table-column>
+      <el-table-column prop="price" label="Price ($)" width="150" sortable></el-table-column>
+      <el-table-column prop="stocked" label="Stocked" width="150" :filters="[{ text: 'Yes', value: true }, { text: 'No', value: false }]" :filter-method="filterTag" filter-placement="bottom-end">
         <template slot-scope="scope">
           <el-tag :type="scope.row.stocked ? 'success' : 'primary'" disable-transitions>{{scope.row.stocked ? "Yes" : "No"}}</el-tag>
         </template>