test

src/views/test/detail.vue

@@ -1,7 +1,26 @@
 <template>
   <div id="detail">
     <detail-frame title="测试详情页" returns="/list">
-      <data-form :fields="fields" :rules="rules" @save="handleSave" :isNew="isNew"></data-form>
+      <data-form :fields="fields" :rules="rules" @save="handleSave" :isNew="isNew">
+        <template #options="{item}">
+          <template v-if="item.model === 'gender'">
+            <el-option label="男" value="1"></el-option>
+            <el-option label="女" value="0"></el-option>
+          </template>
+        </template>
+        <template #radios="{item}">
+          <template v-if="item.model === 'genders'">
+            <el-radio label="1">男</el-radio>
+            <el-radio label="0">女</el-radio>
+          </template>
+        </template>
+        <template #checkboxs="{item}">
+          <template v-if="item.model === 'genderss'">
+            <el-checkbox label="0">女</el-checkbox>
+            <el-checkbox label="1">男</el-checkbox>
+          </template>
+        </template>
+      </data-form>
     </detail-frame>
   </div>
 </template>
@@ -21,37 +40,42 @@ export default {
     fields: [
       { label: '姓名', required: true, model: 'name' },
       { label: '性别', required: true, model: 'gender', type: `select` },
-      { label: '年龄', required: true, model: 'birthday' },
+      { label: '性别2', model: 'genders', type: `radio` },
+      { label: '性别3', model: 'genderss', type: `checkbox` },
+      { label: '生日', required: true, model: 'birthday', type: 'date' },
       { label: '地址', required: true, model: 'address' },
       { label: '电话', required: true, model: 'tel', options: { maxlength: 11, minlength: 11 } },
-      { label: '紧急联系人', required: true, model: 'urgentname' },
+      { label: '紧急联系人', required: true, model: 'urgentname', type: 'textarea' },
       { label: '紧急联系人电话', required: true, model: 'urgenttel', options: { maxlength: 11, minlength: 11 } },
-      { label: '个人简介', model: 'content', custom: true },
+      { label: '个人简介', model: 'content', type: 'editor' },
     ],
     rules: {
-      name: [{ required: true, message: '请输入姓名' }],
-      sex: [{ required: true, message: '请选择性别' }],
-      birthday: [{ required: true, message: '请填写年龄' }],
-      address: [{ required: true, message: '请输入地址' }],
-      tel: [
-        { required: true, message: '请输入电话' },
-        { min: 11, max: 11, message: '请输入11位电话号码', trigger: 'blur' },
-      ],
-      aid: [{ required: true, message: '请输入紧急联系人' }],
-      aid_tel: [
-        { required: true, message: '请输入紧急联系人电话' },
-        { min: 11, max: 11, message: '请输入11位电话号码', trigger: 'blur' },
-      ],
+      // name: [{ required: true, message: '请输入姓名' }],
+      // sex: [{ required: true, message: '请选择性别' }],
+      // birthday: [{ required: true, message: '请填写生日' }],
+      // address: [{ required: true, message: '请输入地址' }],
+      // tel: [
+      //   { required: true, message: '请输入电话' },
+      //   { min: 11, max: 11, message: '请输入11位电话号码', trigger: 'blur' },
+      // ],
+      // aid: [{ required: true, message: '请输入紧急联系人' }],
+      // aid_tel: [
+      //   { required: true, message: '请输入紧急联系人电话' },
+      //   { min: 11, max: 11, message: '请输入11位电话号码', trigger: 'blur' },
+      // ],
     },
   }),
   created() {},
   computed: {
     isNew() {
-      return this.$route.query.id ? true : false;
+      return this.$route.query.id ? false : true;
     },
   },
   methods: {
-    async handleSave({ isNew, data }) {},
+    async handleSave({ isNew, data }) {
+      console.log(isNew);
+      console.log(data);
+    },
   },
 };
 </script>

src/views/test/list.vue

@@ -38,6 +38,20 @@ export default {
     list: [
       { name: 'test1', gender: '1' },
       { name: 'test2', gender: '0' },
+      { name: 'test1', gender: '1' },
+      { name: 'test2', gender: '0' },
+      { name: 'test1', gender: '1' },
+      { name: 'test2', gender: '0' },
+      { name: 'test1', gender: '1' },
+      { name: 'test2', gender: '0' },
+      { name: 'test1', gender: '1' },
+      { name: 'test2', gender: '0' },
+      { name: 'test1', gender: '1' },
+      { name: 'test2', gender: '0' },
+      { name: 'test1', gender: '1' },
+      { name: 'test2', gender: '0' },
+      { name: 'test1', gender: '1' },
+      { name: 'test2', gender: '0' },
     ],
     filFields: [
       { label: '姓名', model: 'name' },