parent
0e01e1bfd3
commit
6d9a64b2b1
24 changed files with 420 additions and 113 deletions
@ -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> |
||||
@ -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') |
||||
@ -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 |
||||
@ -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> |
||||
@ -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> |
||||
@ -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> |
||||
Loading…
Reference in new issue