|
|
@@ -1,5 +1,100 @@
|
|
|
<template>
|
|
|
- <div class="level-list">
|
|
|
- <h1>等级列表</h1>
|
|
|
+ <div class="level-list">
|
|
|
+ <!-- 按钮区域 -->
|
|
|
+ <div class="input-content">
|
|
|
+ <el-button type="primary">添加等级</el-button>
|
|
|
</div>
|
|
|
-</template>
|
|
|
+ <!-- 表格区域 -->
|
|
|
+ <div class="table-content">
|
|
|
+ <el-table :data="tableData" style="width: 100%">
|
|
|
+ <!-- <el-table-column label="序号" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.$index +1 }}
|
|
|
+ </template>
|
|
|
+ </el-table-column> -->
|
|
|
+ <el-table-column label="序号" type="index" width="100">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="等级编号" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span style="margin-left: 10px">{{ scope.row.jrid }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="等级名称"
|
|
|
+ width="180"
|
|
|
+ prop="levelname"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="danger"
|
|
|
+ @click="handleDelete(scope.$index, scope.row)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// 引入axios
|
|
|
+import axios from "axios";
|
|
|
+export default {
|
|
|
+ name: "LevelList",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ jrid: 1,
|
|
|
+ levelname: "普通用户",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 使用生命周期函数 created 在组件创建成功后执行
|
|
|
+ // 生命周期函数相当于公共空间不要写太多的逻辑代码
|
|
|
+ created() {
|
|
|
+ // 调用函数
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 定义一个函数 用来获取数据
|
|
|
+ getData() {
|
|
|
+ // 发送请求
|
|
|
+ // axios({}).then(()=>{}).catch(()=>{});
|
|
|
+ axios({
|
|
|
+ // method请求方式
|
|
|
+ method: "get",
|
|
|
+ // url请求地址
|
|
|
+ url: "http://39.105.160.25:18080/levelController/getLevel",
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res.data.data.records);
|
|
|
+ this.tableData = res.data.data.records;
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleEdit(index, row) {
|
|
|
+ console.log(index, row);
|
|
|
+ },
|
|
|
+ handleDelete(index, row) {
|
|
|
+ console.log(index, row);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<!-- scoped 表示当前样式只作用于当前组件 -->
|
|
|
+<style scoped>
|
|
|
+.level-list {
|
|
|
+ padding: 30px;
|
|
|
+}
|
|
|
+</style>
|
