refactor[list.vue]: improve readability, fix code smells and apply Vue best

practices

src/views/example/list.vue

@@ -1,50 +1,95 @@
 <template>
   <div class="app-container">
-    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
+    <el-table
-      <el-table-column align="center" label="ID" width="80">
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
+      <el-table-column
+        align="center"
+        label="ID"
+        width="80"
+      >
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="180px" align="center" label="Date">
+      <el-table-column
+        width="180px"
+        align="center"
+        label="Date"
+      >
         <template slot-scope="scope">
-          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+          <span>{{ getFormattedDate(scope.row.timestamp) }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="120px" align="center" label="Author">
+      <el-table-column
+        width="120px"
+        align="center"
+        label="Author"
+      >
         <template slot-scope="scope">
           <span>{{ scope.row.author }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="100px" label="Importance">
+      <el-table-column
+        width="100px"
+        label="Importance"
+      >
         <template slot-scope="scope">
-          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon" />
+          <svg-icon
+            v-for="n in +scope.row.importance"
+            :key="n"
+            icon-class="star"
+            class="meta-item__icon"
+          />
         </template>
       </el-table-column>
 
-      <el-table-column class-name="status-col" label="Status" width="110">
+      <el-table-column
-        <template slot-scope="{row}">
+        class-name="status-col"
-          <el-tag :type="row.status | statusFilter">
+        label="Status"
+        width="110"
+      >
+        <template slot-scope="{ row }">
+          <el-tag :type="getStatusType(row.status)">
             {{ row.status }}
           </el-tag>
         </template>
       </el-table-column>
 
-      <el-table-column min-width="300px" label="Title">
+      <el-table-column
-        <template slot-scope="{row}">
+        min-width="300px"
-          <router-link :to="'/example/edit/'+row.id" class="link-type">
+        label="Title"
+      >
+        <template slot-scope="{ row }">
+          <router-link
+            :to="'/example/edit/' + row.id"
+            class="link-type"
+          >
             <span>{{ row.title }}</span>
           </router-link>
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="Actions" width="120">
+      <el-table-column
+        align="center"
+        label="Actions"
+        width="120"
+      >
         <template slot-scope="scope">
-          <router-link :to="'/example/edit/'+scope.row.id">
+          <router-link :to="'/example/edit/' + scope.row.id">
-            <el-button type="primary" size="small" icon="el-icon-edit">
+            <el-button
+              type="primary"
+              size="small"
+              icon="el-icon-edit"
+            >
               Edit
             </el-button>
           </router-link>
@@ -52,27 +97,25 @@
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.page"
+      :limit.sync="listQuery.limit"
+      @pagination="getList"
+    />
   </div>
 </template>
 
 <script>
 import { fetchList } from '@/api/article'
-import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import Pagination from '@/components/Pagination'
+import { parseTime } from '@/utils'
 
 export default {
   name: 'ArticleList',
   components: { Pagination },
-  filters: {
+
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
   data() {
     return {
       list: null,
@@ -84,9 +127,11 @@ export default {
       }
     }
   },
+
   created() {
     this.getList()
   },
+
   methods: {
     getList() {
       this.listLoading = true
@@ -95,6 +140,19 @@ export default {
         this.total = response.data.total
         this.listLoading = false
       })
+    },
+
+    getFormattedDate(timestamp) {
+      return parseTime(timestamp, '{y}-{m}-{d} {h}:{i}')
+    },
+
+    getStatusType(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status] || ''
     }
   }
 }