添加等级模块页面

src/views/level/addLevel.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <h1 class="list-title">添加等级</h1>
+    <el-form :model="addLevelRuleForm" ref="addLevelRuleForm" label-width="100px" class="demo-addLevelRuleForm">
+      <el-form-item label="等级名称" prop="age" :rules="[
+        { required: true, message: '等级名称不能为空' }
+      ]">
+        <el-input v-model.number="addLevelRuleForm.age" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('addLevelRuleForm')">提交</el-button>
+        <el-button @click="resetForm('addLevelRuleForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      addLevelRuleForm: {
+        age: ''
+      }
+    };
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    }
+  }
+}
+</script>
+
+<style scoped>
+.list-title {
+  text-align: center;
+  color: #4f4e4e;
+  font-weight: normal;
+}
+.demo-addLevelRuleForm {
+  margin: 50px auto 0;
+  transform: translateX(-50px);
+  width: 700px;
+}
+</style>

src/views/level/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h1>等级首页</h1>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+h1 {
+  text-align: center;
+} 
+</style>

src/views/level/levelList.vue

@@ -0,0 +1,102 @@
+<template>
+  <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>
+</template>
+
+<script>
+export default {
+  methods: {
+    deleteRow(index, rows) {
+      rows.splice(index, 1);
+    }
+  },
+  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
+      }]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.list-title {
+  text-align: center;
+  color: #4f4e4e;
+  font-weight: normal;
+}
+.list-table {
+  margin: 0 auto;
+}
+</style>