1

src/views/system/password/index.vue

@@ -1,7 +1,11 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24" class="main animate__animated animate__backInRight"> test </el-col>
+      <el-col :span="24" class="main animate__animated animate__backInRight">
+        <el-col :span="12">
+          <data-form :fields="fields" :data="form" :rules="rules" @save="toSave"> </data-form>
+        </el-col>
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -13,10 +17,23 @@ export default {
   props: {},
   components: {},
   data: function () {
-    return {};
+    return {
+      fields: [{ label: '新密码', model: 'password', type: 'password' }],
+      // 表单验证
+      rules: {
+        password: [{ required: true, message: '请输入新密码' }],
+      },
+      // 表单object
+      form: {},
+    };
   },
   created() {},
-  methods: {},
+  methods: {
+    // 提交按钮
+    async toSave({ data }) {
+      console.log(data);
+    },
+  },
   computed: {
     ...mapState(['user']),
   },
@@ -33,4 +50,10 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  .button {
+    text-align: center;
+  }
+}
+</style>