增加获取等级列表的功能

src/views/level/levelList.vue

@@ -2,90 +2,55 @@
   <div>
     <h1 class="list-title">等级列表</h1>
     <hr>
-    <el-table :data="tableData" style="width: 1000px" max-height="250" class="list-table">
-      <el-table-column fixed prop="date" label="日期" width="150">
-      </el-table-column>
-      <el-table-column prop="name" label="姓名" width="120">
-      </el-table-column>
-      <el-table-column prop="province" label="省份" width="120">
-      </el-table-column>
-      <el-table-column prop="city" label="市区" width="120">
-      </el-table-column>
-      <el-table-column prop="address" label="地址" width="300">
-      </el-table-column>
-      <el-table-column prop="zip" label="邮编" width="120">
-      </el-table-column>
-      <el-table-column fixed="right" label="操作" width="120">
-        <template slot-scope="scope">
-          <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
-            移除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <div v-show="isShow">
+      <el-table :data="tableData" style="width: 500px" max-height="250" class="list-table">
+        <el-table-column fixed prop="jrid" label="等级ID" width="150">
+        </el-table-column>
+        <el-table-column prop="levelname" label="等级名称" width="120">
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" width="120">
+          <template slot-scope="scope">
+            <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
+              移除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div v-show="!isShow">
+      <p>暂时没有等级</p>
+    </div>
   </div>
 </template>
 
 <script>
+import { getLevelList } from '@/api/level';
 export default {
   methods: {
     deleteRow(index, rows) {
       rows.splice(index, 1);
+    },
+    showLevelList() {
+      getLevelList().then(res => {
+        console.log('res', res)
+        if (res.code == 101) {
+          this.tableData = res.data
+        } else {
+          this.isShow = false  
+        }
+      }).catch(err => {
+        console.log('err', err)
+      })
     }
   },
   data() {
     return {
-      tableData: [{
-        date: '2016-05-03',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333
-      }, {
-        date: '2016-05-02',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333
-      }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333
-      }, {
-        date: '2016-05-08',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333
-      }, {
-        date: '2016-05-06',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333
-      }, {
-        date: '2016-05-07',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333
-      }]
+      tableData: [],
+      isShow: true
     }
+  },
+  created() {
+    this.showLevelList()
   }
 }
 </script>
@@ -96,6 +61,7 @@ export default {
   color: #4f4e4e;
   font-weight: normal;
 }
+
 .list-table {
   margin: 0 auto;
 }