admin

10_vuecli/bankpro/src/views/level/LevelList.vue

@@ -1,24 +1,13 @@
 <template>
-    <div>
+    <div class="level-list">
         <h1>等级列表</h1>
         <div>
-            <el-table :data="tableData" style="width: 100%" >
-                <el-table-column label="日期" width="180">
-                    <template slot-scope="scope">
-                        <i class="el-icon-time"></i>
-                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
-                    </template>
+            <el-table :data="tableData" style="width: 100%">
+                <el-table-column type="index" label="序号" width="200">
                 </el-table-column>
-                <el-table-column label="姓名" width="180">
-                    <template slot-scope="scope">
-                        <el-popover trigger="hover" placement="top">
-                            <p>姓名: {{ scope.row.name }}</p>
-                            <p>住址: {{ scope.row.address }}</p>
-                            <div slot="reference" class="name-wrapper">
-                                <el-tag size="medium">{{ scope.row.name }}</el-tag>
-                            </div>
-                        </el-popover>
-                    </template>
+                <el-table-column prop="jrid" label="等级ID">
+                </el-table-column>
+                <el-table-column prop="levelname" label="等级名称">
                 </el-table-column>
                 <el-table-column label="操作">
                     <template slot-scope="scope">
@@ -38,36 +27,42 @@ export default {
     data() {
         return {
             tableData: [{
-                date: '2016-05-02',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
+                jrid: 1001,
+                levelname: '普通客户'
             }, {
-                date: '2016-05-04',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1517 弄'
-            }, {
-                date: '2016-05-01',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1519 弄'
-            }, {
-                date: '2016-05-03',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1516 弄'
+                jrid: 1002,
+                levelname: '金牌客户'
             }]
         }
     },
     methods: {
-         handleEdit(index, row) {
-        console.log(index, row);
-      },
-      handleDelete(index, row) {
-        console.log(index, row);
-      }
+        // 获取等级列表
+        getData() {
+            // 发送请求获取等级列表
+            axios.get("http://39.105.160.25:18080/levelController/getLevel").then(res => {
+                console.log(res.data.data.records)
+                // 将返回的等级列表赋值给 tableData
+                this.tableData = res.data.data.records
+            })
+        },
+        // 编辑等级
+        handleEdit(index, row) {
+            console.log(index, row);
+        },
+        // 删除等级
+        handleDelete(index, row) {
+            console.log(index, row);
+        }
     },
     created() {
-        axios.get("http://39.105.160.25:18080/levelController/getLevel").then(res => {
-            console.log(res.data)
-        })
+        // 组件创建时调用获取等级列表
+        this.getData()
     }
 }
-</script>
+</script>
+<!-- scoped 表示样式只作用于当前组件 -->
+<style scoped>
+.level-list {
+    padding: 20px;
+}
+</style>