refactor

src/views/example/table/dragTable.vue

@@ -47,20 +47,20 @@
 
       <el-table-column align="center" label="拖拽" width="95">
         <template scope="scope">
-          <icon-svg class='drag-handler' icon-class="tuozhuai" ></icon-svg>
+          <icon-svg class='drag-handler' icon-class="tuozhuai"></icon-svg>
         </template>
       </el-table-column>
 
     </el-table>
 
-    <div class='show-d'>默认顺序  &nbsp;  {{ olderList}}</div>
+    <div class='show-d'>默认顺序 &nbsp; {{ olderList}}</div>
     <div class='show-d'>拖拽后顺序{{newList}}</div>
 
   </div>
 </template>
 
 <script>
-import { fetchList } from 'api/article_table'
+import { fetchList } from '@/api/article'
 import Sortable from 'sortablejs'
 
 export default {
@@ -79,9 +79,6 @@ export default {
       newList: []
     }
   },
-  created() {
-    this.getList()
-  },
   filters: {
     statusFilter(status) {
       const statusMap = {
@@ -92,6 +89,9 @@ export default {
       return statusMap[status]
     }
   },
+  created() {
+    this.getList()
+  },
   methods: {
     getList() {
       this.listLoading = true
@@ -109,7 +109,6 @@ export default {
     setSort() {
       const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
       this.sortable = Sortable.create(el, {
-          // handle: '.drag-handler',
         onEnd: evt => {
           const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
           this.newList.splice(evt.newIndex, 0, tempIndex)
@@ -120,7 +119,7 @@ export default {
 }
 </script>
 
-<style >
+<style scoped>
 .drag-handler{
   width: 30px;
   height: 30px;

src/views/example/table/dynamictable/fixedThead.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
 
     <div class="filter-container">
-      <el-checkbox-group v-model="checkboxVal"	>
+      <el-checkbox-group v-model="checkboxVal">
         <el-checkbox label="apple">apple</el-checkbox>
         <el-checkbox label="banana">banana</el-checkbox>
         <el-checkbox label="orange">orange</el-checkbox>

src/views/example/table/dynamictable/index.vue

@@ -9,8 +9,8 @@
 </template>
 
 <script>
-import fixedThead from './dynamictable/fixedThead'
-import unfixedThead from './dynamictable/unfixedThead'
+import fixedThead from './fixedThead'
+import unfixedThead from './unfixedThead'
 
 export default {
   components: { fixedThead, unfixedThead }

src/views/example/table/inlineEditTable.vue

@@ -42,8 +42,7 @@
 
       <el-table-column align="center" label="编辑" width="120">
         <template scope="scope">
-          <el-button v-show='!scope.row.edit' type="primary" @click='scope.row.edit=true' size="small" icon="edit">编辑</el-button>
-          <el-button v-show='scope.row.edit' type="success" @click='scope.row.edit=false' size="small" icon="check">完成</el-button>
+          <el-button :type="scope.row.edit?'success':'primary'" @click='scope.row.edit=!scope.row.edit' size="small" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
         </template>
       </el-table-column>
 
@@ -52,7 +51,7 @@
 </template>
 
 <script>
-import { fetchList } from 'api/article_table'
+import { fetchList } from '@/api/article'
 
 export default {
   name: 'inline_edit-table_demo',
@@ -66,9 +65,6 @@ export default {
       }
     }
   },
-  created() {
-    this.getList()
-  },
   filters: {
     statusFilter(status) {
       const statusMap = {
@@ -79,6 +75,9 @@ export default {
       return statusMap[status]
     }
   },
+  created() {
+    this.getList()
+  },
   methods: {
     getList() {
       this.listLoading = true

src/views/example/table/table.vue

@@ -25,7 +25,7 @@
       <el-checkbox class="filter-item" @change='tableKey=tableKey+1' v-model="showAuditor">显示审核人</el-checkbox>
     </div>
 
-    <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
+    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">
 
       <el-table-column align="center" label="序号" width="65">
         <template scope="scope">
@@ -150,9 +150,9 @@
 </template>
 
 <script>
-import { fetchList, fetchPv } from 'api/article_table'
+import { fetchList, fetchPv } from '@/api/article'
 import waves from '@/directive/waves.js'// 水波纹指令
-import { parseTime } from 'utils'
+import { parseTime } from '@/utils'
 
 const calendarTypeOptions = [
       { key: 'CN', display_name: '中国' },
@@ -161,7 +161,7 @@ const calendarTypeOptions = [
       { key: 'EU', display_name: '欧元区' }
 ]
 
-  // arr to obj
+// arr to obj
 const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
   acc[cur.key] = cur.display_name
   return acc
@@ -210,9 +210,6 @@ export default {
       tableKey: 0
     }
   },
-  created() {
-    this.getList()
-  },
   filters: {
     statusFilter(status) {
       const statusMap = {
@@ -226,6 +223,9 @@ export default {
       return calendarTypeKeyValue[type]
     }
   },
+  created() {
+    this.getList()
+  },
   methods: {
     getList() {
       this.listLoading = true