refine: table demo add status

PanJiaChen · PanJiaChen · commit ee35d1c0a49f · 2017-09-15T13:50:00.000+08:00
diff --git a/src/views/table/index.vue b/src/views/table/index.vue
@@ -11,7 +11,6 @@
           {{scope.row.title}}
         </template>
       </el-table-column>
-
       <el-table-column label="Author" width="110" align="center">
         <template scope="scope">
           <span>{{scope.row.author}}</span>
@@ -22,6 +21,11 @@
           {{scope.row.pageviews}}
         </template>
       </el-table-column>
+      <el-table-column class-name="status-col" label="Status" width="110" align="center">
+        <template scope="scope">
+          <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column align="center" prop="created_at" label="Display_time" width="200">
         <template scope="scope">
           <i class="el-icon-time"></i>
@@ -42,6 +46,16 @@ export default {
       listLoading: true
     }
   },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'gray',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
   created() {
     this.fetchData()
   },
