开始学习表单

demo/el-table/App.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <router-link :to="{name:'table1'}">Table Demo 1: 基本表格</router-link><br>
+    <router-link :to="{name:'table2'}">Table Demo 2: 斑马线表格</router-link><br>
+    <router-link :to="{name:'table3'}">Table Demo 3: 带边框的表格</router-link><br>
+    <router-link :to="{name:'table4'}">Table Demo 4: 自定义样式</router-link><br>
+    <router-link :to="{name:'table5'}">Table Demo 5: 滚动条</router-link><br>
+    <router-link :to="{name:'table6'}">Table Demo 6: 固定列</router-link><br>
+    <router-link :to="{name:'table7'}">Table Demo 7: 多级表头</router-link><br>
+    <router-link :to="{name:'table8'}">Table Demo 8: 合并行列</router-link><br>
+    <router-link :to="{name:'table9'}">Table Demo 9: 带状态的行</router-link><br>
+    <router-link :to="{name:'table10'}">Table Demo 10: 单行选择</router-link><br>
+    <router-link :to="{name:'table11'}">Table Demo 11: 多行选择</router-link><br>
+    <router-link :to="{name:'table12'}">Table Demo 12: 排序</router-link><br>
+    <router-link :to="{name:'table13'}">Table Demo 13: 筛选</router-link><br>
+    <router-link :to="{name:'table14'}">Table Demo 14: 展开行</router-link><br>
+    <router-link :to="{name:'table15'}">Table Demo 15: 树形数据</router-link><br>
+    <router-link :to="{name:'table16'}">Table Demo 16: 分页</router-link><br>
+  </div>
+  <div>
+    <router-view></router-view>
+  </div></template>
+<script setup>
+
+</script>

demo/el-table/main.js

@@ -0,0 +1,7 @@
+import {createApp} from "vue";
+import App from "./App.vue"
+import router from './router'
+import ElementPlus from "element-plus"
+import "element-plus/dist/index.css"
+
+createApp(App).use(ElementPlus).use(router).mount('#app')

demo/el-table/router/index.js

@@ -0,0 +1,122 @@
+// 引入必要的router组件
+import {createRouter, createWebHistory} from 'vue-router'
+// 引入视图
+// const root = () => import('../App.vue')
+const tableDemo1 = () => import('../views/Table_Demo1.vue')
+const tableDemo2 = () => import('../views/Table_Demo2.vue')
+const tableDemo3 = () => import('../views/Table_Demo3.vue')
+const tableDemo4 = () => import('../views/Table_Demo4.vue')
+const tableDemo5 = () => import('../views/Table_Demo5.vue')
+const tableDemo6 = () => import('../views/Table_Demo6.vue')
+const tableDemo7 = () => import('../views/Table_Demo7.vue')
+const tableDemo8 = () => import('../views/Table_Demo8.vue')
+const tableDemo9 = () => import('../views/Table_Demo9.vue')
+const tableDemo10 = () => import('../views/Table_Demo10.vue')
+const tableDemo11 = () => import('../views/Table_Demo11.vue')
+const tableDemo12 = () => import('../views/Table_Demo12.vue')
+const tableDemo13 = () => import('../views/Table_Demo13.vue')
+const tableDemo14 = () => import('../views/Table_Demo14.vue')
+const tableDemo15 = () => import('../views/Table_Demo15.vue')
+const tableDemo16 = () => import('../views/Table_Demo16.vue')
+
+// 引入组件
+
+
+// 创建路由
+const routes = [
+    // {
+    //     path: "/",
+    //     name: 'root',
+    //     component: root
+    // },
+    {
+        path: '/table1',
+        name: 'table1',
+        component: tableDemo1
+    },
+    {
+        path: '/table2',
+        name: 'table2',
+        component: tableDemo2
+    },
+    {
+        path: '/table3',
+        name: 'table3',
+        component: tableDemo3
+    },
+    {
+        path: '/table4',
+        name: 'table4',
+        component: tableDemo4
+    },
+    {
+        path: '/table5',
+        name: 'table5',
+        component: tableDemo5
+    },
+    {
+        path: '/table6',
+        name: 'table6',
+        component: tableDemo6
+    },
+    {
+        path: '/table7',
+        name: 'table7',
+        component: tableDemo7
+    },
+    {
+        path: '/table8',
+        name: 'table8',
+        component: tableDemo8
+    },
+    {
+        path: '/table9',
+        name: 'table9',
+        component: tableDemo9
+    },
+    {
+        path: '/table10',
+        name: 'table10',
+        component: tableDemo10
+    },
+    {
+        path: '/table11',
+        name: 'table11',
+        component: tableDemo11
+    },
+    {
+        path: '/table12',
+        name: 'table12',
+        component: tableDemo12
+    },
+    {
+        path: '/table13',
+        name: 'table13',
+        component: tableDemo13
+    },
+    {
+        path: '/table14',
+        name: 'table14',
+        component: tableDemo14
+    },
+    {
+        path: '/table15',
+        name: 'table15',
+        component: tableDemo15
+    },
+    {
+        path: '/table16',
+        name: 'table16',
+        component: tableDemo16
+    },
+]
+
+// 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes
+// 路由类型分为hash型和html5型，分别为createWebHashHistory和createWebHistory
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+})
+
+// 导出路由
+export default router

src/App.vue

@@ -1,22 +1,9 @@
 <template>
   <div>
-    <router-link :to="{name:'table1'}">Table Demo 1: 基本表格</router-link><br>
+    <router-link :to="{name:'form1'}">Form Demo 1: 基本使用</router-link><br>
-    <router-link :to="{name:'table2'}">Table Demo 2: 斑马线表格</router-link><br>
+    <router-link :to="{name:'form2'}">Form Demo 2: 行内表单</router-link><br>
-    <router-link :to="{name:'table3'}">Table Demo 3: 带边框的表格</router-link><br>
-    <router-link :to="{name:'table4'}">Table Demo 4: 自定义样式</router-link><br>
-    <router-link :to="{name:'table5'}">Table Demo 5: 滚动条</router-link><br>
-    <router-link :to="{name:'table6'}">Table Demo 6: 固定列</router-link><br>
-    <router-link :to="{name:'table7'}">Table Demo 7: 多级表头</router-link><br>
-    <router-link :to="{name:'table8'}">Table Demo 8: 合并行列</router-link><br>
-    <router-link :to="{name:'table9'}">Table Demo 9: 带状态的行</router-link><br>
-    <router-link :to="{name:'table10'}">Table Demo 10: 单行选择</router-link><br>
-    <router-link :to="{name:'table11'}">Table Demo 11: 多行选择</router-link><br>
-    <router-link :to="{name:'table12'}">Table Demo 12: 排序</router-link><br>
-    <router-link :to="{name:'table13'}">Table Demo 13: 筛选</router-link><br>
-    <router-link :to="{name:'table14'}">Table Demo 14: 展开行</router-link><br>
-    <router-link :to="{name:'table15'}">Table Demo 15: 树形数据</router-link><br>
-    <router-link :to="{name:'table16'}">Table Demo 16: 分页</router-link><br>
   </div>
+  <hr>
   <div>
     <router-view></router-view>
   </div></template>

src/router/index.js

@@ -2,112 +2,24 @@
 import {createRouter, createWebHistory} from 'vue-router'
 // 引入视图
 // const root = () => import('../App.vue')
-const tableDemo1 = () => import('../views/Table_Demo1.vue')
+const formDemo1 = () => import('../views/Form_Demo1.vue')
-const tableDemo2 = () => import('../views/Table_Demo2.vue')
+const formDemo2 = () => import('../views/Form_Demo2.vue')
-const tableDemo3 = () => import('../views/Table_Demo3.vue')
+
-const tableDemo4 = () => import('../views/Table_Demo4.vue')
-const tableDemo5 = () => import('../views/Table_Demo5.vue')
-const tableDemo6 = () => import('../views/Table_Demo6.vue')
-const tableDemo7 = () => import('../views/Table_Demo7.vue')
-const tableDemo8 = () => import('../views/Table_Demo8.vue')
-const tableDemo9 = () => import('../views/Table_Demo9.vue')
-const tableDemo10 = () => import('../views/Table_Demo10.vue')
-const tableDemo11 = () => import('../views/Table_Demo11.vue')
-const tableDemo12 = () => import('../views/Table_Demo12.vue')
-const tableDemo13 = () => import('../views/Table_Demo13.vue')
-const tableDemo14 = () => import('../views/Table_Demo14.vue')
-const tableDemo15 = () => import('../views/Table_Demo15.vue')
-const tableDemo16 = () => import('../views/Table_Demo16.vue')
 
 // 引入组件
 
 
 // 创建路由
 const routes = [
-    // {
-    //     path: "/",
-    //     name: 'root',
-    //     component: root
-    // },
-    {
-        path: '/table1',
-        name: 'table1',
-        component: tableDemo1
-    },
-    {
-        path: '/table2',
-        name: 'table2',
-        component: tableDemo2
-    },
-    {
-        path: '/table3',
-        name: 'table3',
-        component: tableDemo3
-    },
-    {
-        path: '/table4',
-        name: 'table4',
-        component: tableDemo4
-    },
-    {
-        path: '/table5',
-        name: 'table5',
-        component: tableDemo5
-    },
-    {
-        path: '/table6',
-        name: 'table6',
-        component: tableDemo6
-    },
-    {
-        path: '/table7',
-        name: 'table7',
-        component: tableDemo7
-    },
-    {
-        path: '/table8',
-        name: 'table8',
-        component: tableDemo8
-    },
-    {
-        path: '/table9',
-        name: 'table9',
-        component: tableDemo9
-    },
-    {
-        path: '/table10',
-        name: 'table10',
-        component: tableDemo10
-    },
-    {
-        path: '/table11',
-        name: 'table11',
-        component: tableDemo11
-    },
-    {
-        path: '/table12',
-        name: 'table12',
-        component: tableDemo12
-    },
-    {
-        path: '/table13',
-        name: 'table13',
-        component: tableDemo13
-    },
-    {
-        path: '/table14',
-        name: 'table14',
-        component: tableDemo14
-    },
     {
-        path: '/table15',
+        path: '/form1',
-        name: 'table15',
+        name: 'form1',
-        component: tableDemo15
+        component: formDemo1
     },
     {
-        path: '/table16',
+        path: '/form2',
-        name: 'table16',
+        name: 'form2',
-        component: tableDemo16
+        component: formDemo2
     },
 ]
 

src/views/Form_Demo1.vue

@@ -0,0 +1,102 @@
+<template>
+  <el-form :model="form" size="small" label-width="120" label-position="left">
+    <el-form-item label="活动名称" style="width: 400px">
+      <el-input v-model="form.name" maxlength="10" show-word-limit placeholder="请输入活动名称"></el-input>
+    </el-form-item>
+    <el-form-item label="活动地点">
+      <el-select v-model="form.region" filterable placeholder="请选择活动区域">
+        <el-option label="北京" value="beijing"></el-option>
+        <el-option label="上海" value="shanghai"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="活动时间">
+      <el-row style="width: 400px">
+        <el-col :span="11">
+          <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%"></el-date-picker>
+        </el-col>
+        <el-col :span="2" class="text-center">
+          <span class="text-gray-500">-</span>
+        </el-col>
+        <el-col :span="11">
+          <el-time-picker v-model="form.date2" placeholder="选择时间"></el-time-picker>
+        </el-col>
+      </el-row>
+    </el-form-item>
+    <el-form-item label="是否直播">
+      <el-switch v-model="form.delivery"></el-switch>
+    </el-form-item>
+    <el-form-item label="活动类型">
+      <el-checkbox-group v-model="form.type">
+        <el-checkbox label="线上活动" name="type"></el-checkbox>
+        <el-checkbox label="线下活动" name="type"></el-checkbox>
+        <el-checkbox label="促销活动" name="type"></el-checkbox>
+        <el-checkbox label="新品发布" name="type"></el-checkbox>
+      </el-checkbox-group>
+    </el-form-item>
+    <el-form-item label="场地资源">
+      <el-radio-group v-model="form.resource">
+        <el-radio label="自助"></el-radio>
+        <el-radio label="赞助"></el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="参与人数">
+      <!--      <el-input-number v-model="form.number" min="0" max="10"></el-input-number>-->
+      <el-input v-model="form.number" type="number" min="0" max="10" placeholder="请输入参与人数"
+                style="width: 120px;"></el-input>
+    </el-form-item>
+    <el-form-item label="备注">
+      <el-input v-model="form.desc" type="textarea" maxlength="400" show-word-limit style="width: 400px"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="submit">创建</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: "Form_Demo1",
+  data() {
+    return {
+      form: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        number: "",
+        desc: "",
+      }
+    }
+  },
+  methods: {
+    submit() {
+      console.log('created')
+      console.log(this.form)
+    },
+    cancel() {
+      console.log('cleared')
+      this.form = {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        number: "",
+        desc: "",
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text-center {
+  text-align: center
+}
+</style>

src/views/Form_Demo2.vue

@@ -0,0 +1,43 @@
+<template>
+  <el-form :model="form" size="small" label-width="120" label-position="left" inline>
+    <el-form-item label="活动名称" style="width: 400px">
+      <el-input v-model="form.name" maxlength="10" show-word-limit placeholder="请输入活动名称"></el-input>
+    </el-form-item>
+    <el-form-item label="活动地点">
+      <el-select v-model="form.region" filterable placeholder="请选择活动区域">
+        <el-option label="北京" value="beijing"></el-option>
+        <el-option label="上海" value="shanghai"></el-option>
+      </el-select>
+    </el-form-item>
+
+    <el-form-item>
+      <el-button type="primary" @click="submit">创建</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: "Form_Demo1",
+  data() {
+    return {
+      form: {
+        name: "",
+        region: "",
+      }
+    }
+  },
+  methods: {
+    submit() {
+      console.log('created')
+      console.log(this.form)
+    },
+  }
+}
+</script>
+
+<style scoped>
+.text-center {
+  text-align: center
+}
+</style>

src/views/Form_Demo3.vue

@@ -0,0 +1,109 @@
+<template>
+  <el-form :model="form" size="small" label-width="120" label-position="left" :rules="rules" ref="form">
+    <el-form-item label="活动名称" style="width: 400px">
+      <el-input v-model="form.name" maxlength="10" show-word-limit placeholder="请输入活动名称"></el-input>
+    </el-form-item>
+    <el-form-item label="活动地点">
+      <el-select v-model="form.region" filterable placeholder="请选择活动区域">
+        <el-option label="北京" value="beijing"></el-option>
+        <el-option label="上海" value="shanghai"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="活动时间">
+      <el-row style="width: 400px">
+        <el-col :span="11">
+          <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%"></el-date-picker>
+        </el-col>
+        <el-col :span="2" class="text-center">
+          <span class="text-gray-500">-</span>
+        </el-col>
+        <el-col :span="11">
+          <el-time-picker v-model="form.date2" placeholder="选择时间"></el-time-picker>
+        </el-col>
+      </el-row>
+    </el-form-item>
+    <el-form-item label="是否直播">
+      <el-switch v-model="form.delivery"></el-switch>
+    </el-form-item>
+    <el-form-item label="活动类型">
+      <el-checkbox-group v-model="form.type">
+        <el-checkbox label="线上活动" name="type"></el-checkbox>
+        <el-checkbox label="线下活动" name="type"></el-checkbox>
+        <el-checkbox label="促销活动" name="type"></el-checkbox>
+        <el-checkbox label="新品发布" name="type"></el-checkbox>
+      </el-checkbox-group>
+    </el-form-item>
+    <el-form-item label="场地资源">
+      <el-radio-group v-model="form.resource">
+        <el-radio label="自助"></el-radio>
+        <el-radio label="赞助"></el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="参与人数">
+      <!--      <el-input-number v-model="form.number" min="0" max="10"></el-input-number>-->
+      <el-input v-model="form.number" type="number" min="0" max="10" placeholder="请输入参与人数"
+                style="width: 120px;"></el-input>
+    </el-form-item>
+    <el-form-item label="备注">
+      <el-input v-model="form.desc" type="textarea" maxlength="400" show-word-limit style="width: 400px"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="submit">创建</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: "Form_Demo1",
+  data() {
+    return {
+      form: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        number: "",
+        desc: "",
+      },
+      rules: {
+        name: [
+          {required: true, message: '请输入活动名称', trigger: 'blur'},
+          {min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur'},
+          {pattern: /^[a-zA-Z][a-zA-Z0-9_-]/, message: '活动名需要以字母开头，仅包含字母数字_-', trigger: 'blur'}
+        ]
+      },
+    }
+  },
+  methods: {
+    submit() {
+      console.log('created')
+      console.log(this.form)
+    },
+    cancel() {
+      console.log('cleared')
+      this.form = {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        number: "",
+        desc: "",
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+.text-center {
+  text-align: center
+}
+</style>