lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity
Files
9bb8056eacf5cd884bd20dd4fbb1e344f03b64cb
vxe-table/examples/views/form/Form.vue
xuliangzhan 9bb8056eac 更新文档
2020-03-13 22:55:15 +08:00

497 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div>
<h2>{{ $t('app.aside.nav.form') }}</h2>
<p class="tip">查看 <router-link class="link" :to="{name: 'VXEAPI', params: {name: 'form'}}">API</router-link></p>
<p>
<vxe-form :data="formData1" @submit="searchEvent" @reset="resetEvent">
<vxe-form-item title="名称" field="name">
<vxe-input v-model="formData1.name" placeholder="请输入名称" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="昵称" field="nickname">
<vxe-input v-model="formData1.nickname" placeholder="请输入昵称"></vxe-input>
</vxe-form-item>
<vxe-form-item title="性别" field="sex">
<vxe-select v-model="formData1.sex" placeholder="请选择性别" clearable>
<vxe-option value="1" label="女"></vxe-option>
<vxe-option value="2" label="男"></vxe-option>
</vxe-select>
</vxe-form-item>
<vxe-form-item>
<vxe-button type="submit" status="primary">默认尺寸</vxe-button>
</vxe-form-item>
</vxe-form>
<vxe-form :data="formData1" @submit="searchEvent" @reset="resetEvent" size="medium">
<vxe-form-item title="名称" field="name">
<vxe-input v-model="formData1.name" placeholder="请输入名称" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="昵称" field="nickname">
<vxe-input v-model="formData1.nickname" placeholder="请输入昵称" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="性别" field="sex">
<vxe-select v-model="formData1.sex" placeholder="请选择性别" clearable>
<vxe-option value="1" label="女"></vxe-option>
<vxe-option value="2" label="男"></vxe-option>
</vxe-select>
</vxe-form-item>
<vxe-form-item>
<vxe-button type="submit" status="primary">中等尺寸</vxe-button>
</vxe-form-item>
</vxe-form>
<vxe-form :data="formData1" @submit="searchEvent" @reset="resetEvent" size="small">
<vxe-form-item title="名称" field="name">
<vxe-input v-model="formData1.name" placeholder="请输入名称" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="昵称" field="nickname">
<vxe-input v-model="formData1.nickname" placeholder="请输入昵称" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="性别" field="sex">
<vxe-select v-model="formData1.sex" placeholder="请选择性别" clearable>
<vxe-option value="1" label="女"></vxe-option>
<vxe-option value="2" label="男"></vxe-option>
</vxe-select>
</vxe-form-item>
<vxe-form-item>
<vxe-button type="submit" status="primary">小型尺寸</vxe-button>
</vxe-form-item>
</vxe-form>
<vxe-form :data="formData1" @submit="searchEvent" @reset="resetEvent" size="mini">
<vxe-form-item title="名称" field="name">
<vxe-input v-model="formData1.name" placeholder="请输入名称" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="昵称" field="nickname">
<vxe-input v-model="formData1.nickname" placeholder="请输入昵称" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="性别" field="sex">
<vxe-select v-model="formData1.sex" placeholder="请选择性别" clearable>
<vxe-option value="1" label="女"></vxe-option>
<vxe-option value="2" label="男"></vxe-option>
</vxe-select>
</vxe-form-item>
<vxe-form-item>
<vxe-button type="submit" status="primary">超小尺寸</vxe-button>
</vxe-form-item>
</vxe-form>
</p>
<p>
<vxe-form ref="xForm" :data="formData2" :rules="formRules3" :loading="loading3" title-align="right" title-width="100" @submit="submitEvent3" @reset="resetEvent">
<vxe-form-item title="名称" field="name" span="12">
<template v-slot="scope">
<vxe-input v-model="formData2.name" placeholder="请输入名称" clearable @input="$refs.xForm.updateStatus(scope)"></vxe-input>
</template>
</vxe-form-item>
<vxe-form-item title="昵称" field="nickname" span="12">
<template v-slot="scope">
<vxe-input v-model="formData2.nickname" placeholder="请输入昵称" clearable @input="$refs.xForm.updateStatus(scope)"></vxe-input>
</template>
</vxe-form-item>
<vxe-form-item title="性别" field="sex" span="12">
<template v-slot="scope">
<vxe-select v-model="formData2.sex" placeholder="请选择性别" clearable @change="$refs.xForm.updateStatus(scope)">
<vxe-option value="1" label="女"></vxe-option>
<vxe-option value="2" label="男"></vxe-option>
</vxe-select>
</template>
</vxe-form-item>
<vxe-form-item title="年龄" field="age" span="12">
<vxe-input v-model="formData2.age" type="integer" placeholder="请输入年龄" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="日期" field="date" span="12">
<vxe-input v-model="formData2.date" type="date" placeholder="请选择日期" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="地址" field="address" span="24">
<vxe-textarea v-model="formData2.address" placeholder="请输入地址" clearable></vxe-textarea>
</vxe-form-item>
<vxe-form-item align="center" span="24">
<vxe-button type="submit" status="primary">基本表单</vxe-button>
<vxe-button type="reset">重置</vxe-button>
</vxe-form-item>
</vxe-form>
</p>
<p>
<vxe-form :data="formData3" title-align="right" title-width="100" @submit="searchEvent" @reset="resetEvent" title-colon>
<vxe-form-item title="名称" field="name" span="8">
<vxe-input v-model="formData3.name" placeholder="请输入名称" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="昵称" field="nickname" span="8" :title-prefix="{ message: '请输入汉字！', icon: 'fa fa-exclamation-circle' }">
<vxe-input v-model="formData3.nickname" placeholder="请输入昵称" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="性别" field="sex" span="8">
<vxe-select v-model="formData3.sex" placeholder="请选择性别" clearable>
<vxe-option value="1" label="女"></vxe-option>
<vxe-option value="2" label="男"></vxe-option>
</vxe-select>
</vxe-form-item>
<vxe-form-item title="年龄" field="age" span="8" :title-prefix="{ message: '请输入数值！', icon: 'fa fa-info-circle' }">
<vxe-input v-model="formData3.age" type="integer" placeholder="请输入年龄" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="区域" field="region" span="8">
<vxe-input v-model="formData4.region" placeholder="请输入区域" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="状态" field="status" span="8">
<vxe-select v-model="formData3.status" placeholder="请选择状态" clearable>
<vxe-option value="0" label="失败"></vxe-option>
<vxe-option value="1" label="成功"></vxe-option>
</vxe-select>
</vxe-form-item>
<vxe-form-item title="体重" field="weight" span="8" folding>
<vxe-input v-model="formData3.weight" type="number" placeholder="请输入体重" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="日期" field="date" span="8" folding>
<vxe-input v-model="formData3.date" type="date" placeholder="请选择日期" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="是否单身" field="single" span="8" folding>
<vxe-radio-group v-model="formData3.single">
<vxe-radio label="1">是</vxe-radio>
<vxe-radio label="0">否</vxe-radio>
</vxe-radio-group>
</vxe-form-item>
<vxe-form-item align="center" span="24" collapse-node>
<vxe-button type="submit" status="primary">折叠式表单</vxe-button>
<vxe-button type="reset">重置</vxe-button>
</vxe-form-item>
</vxe-form>
</p>
<p>
<vxe-form :data="formData4" :items="formItems4"></vxe-form>
</p>
<pre>
<code>
| Tab | 切换到上一个 |
| Shift Tab | 切换到下一个 |
| Enter | 如果有存在提交按钮则提交表单 |
</code>
</pre>
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
<pre>
<code class="html">{{ demoCodes[0] }}</code>
<code class="javascript">{{ demoCodes[1] }}</code>
</pre>
</div>
</template>
<script>
import hljs from 'highlight.js'
export default {
data () {
return {
formData1: {
name: '',
nickname: '',
sex: '1'
},
loading3: false,
formData2: {
name: '',
nickname: '',
sex: '',
age: 26,
date: null,
address: null
},
formRules3: {
name: [
{ required: true, message: '请输入名称' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符' }
],
nickname: [
{ required: true, message: '请输入昵称' }
],
sex: [
{ required: true, message: '请选择性别' }
]
},
formData3: {
name: '',
nickname: '',
sex: '',
age: 30,
status: '1',
region: null,
weight: null,
date: null,
single: '1'
},
formData4: {
name: '',
nickname: '',
sex: '0',
role: '',
age: 22
},
formItems4: [
{ field: 'name', title: '名称', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },
{ field: 'nickname', title: '昵称', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入昵称' } } },
{ field: 'sex', title: '性别', span: 8, itemRender: { name: '$select', options: [{ value: '0', label: '女' }, { value: '1', label: '男' }], props: { placeholder: '请选择性别' } } },
{ field: 'role', title: '角色', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入角色' } } },
{ field: 'age', title: '年龄', span: 8, itemRender: { name: '$input', props: { type: 'number', placeholder: '请输入年龄' } } },
{ field: 'region', title: '名称', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },
{ align: 'center', span: 24, itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: '配置式表单', status: 'primary' } }, { props: { type: 'reset', content: '重置' } }] } }
],
demoCodes: [
`
<p>
<vxe-form :data="formData1" @submit="searchEvent" @reset="resetEvent">
<vxe-form-item title="名称" field="name">
<vxe-input v-model="formData1.name" placeholder="请输入名称" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="昵称" field="nickname">
<vxe-input v-model="formData1.nickname" placeholder="请输入昵称"></vxe-input>
</vxe-form-item>
<vxe-form-item title="性别" field="sex">
<vxe-select v-model="formData1.sex" placeholder="请选择性别" clearable>
<vxe-option value="1" label="女"></vxe-option>
<vxe-option value="2" label="男"></vxe-option>
</vxe-select>
</vxe-form-item>
<vxe-form-item>
<vxe-button type="submit" status="primary">默认尺寸</vxe-button>
</vxe-form-item>
</vxe-form>
<vxe-form :data="formData1" @submit="searchEvent" @reset="resetEvent" size="medium">
<vxe-form-item title="名称" field="name">
<vxe-input v-model="formData1.name" placeholder="请输入名称" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="昵称" field="nickname">
<vxe-input v-model="formData1.nickname" placeholder="请输入昵称" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="性别" field="sex">
<vxe-select v-model="formData1.sex" placeholder="请选择性别" clearable>
<vxe-option value="1" label="女"></vxe-option>
<vxe-option value="2" label="男"></vxe-option>
</vxe-select>
</vxe-form-item>
<vxe-form-item>
<vxe-button type="submit" status="primary">中等尺寸</vxe-button>
</vxe-form-item>
</vxe-form>
<vxe-form :data="formData1" @submit="searchEvent" @reset="resetEvent" size="small">
<vxe-form-item title="名称" field="name">
<vxe-input v-model="formData1.name" placeholder="请输入名称" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="昵称" field="nickname">
<vxe-input v-model="formData1.nickname" placeholder="请输入昵称" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="性别" field="sex">
<vxe-select v-model="formData1.sex" placeholder="请选择性别" clearable>
<vxe-option value="1" label="女"></vxe-option>
<vxe-option value="2" label="男"></vxe-option>
</vxe-select>
</vxe-form-item>
<vxe-form-item>
<vxe-button type="submit" status="primary">小型尺寸</vxe-button>
</vxe-form-item>
</vxe-form>
<vxe-form :data="formData1" @submit="searchEvent" @reset="resetEvent" size="mini">
<vxe-form-item title="名称" field="name">
<vxe-input v-model="formData1.name" placeholder="请输入名称" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="昵称" field="nickname">
<vxe-input v-model="formData1.nickname" placeholder="请输入昵称" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="性别" field="sex">
<vxe-select v-model="formData1.sex" placeholder="请选择性别" clearable>
<vxe-option value="1" label="女"></vxe-option>
<vxe-option value="2" label="男"></vxe-option>
</vxe-select>
</vxe-form-item>
<vxe-form-item>
<vxe-button type="submit" status="primary">超小尺寸</vxe-button>
</vxe-form-item>
</vxe-form>
</p>
<p>
<vxe-form ref="xForm" :data="formData2" :rules="formRules3" :loading="loading3" title-align="right" title-width="100" @submit="submitEvent3" @reset="resetEvent">
<vxe-form-item title="名称" field="name" span="12">
<template v-slot="scope">
<vxe-input v-model="formData2.name" placeholder="请输入名称" clearable @input="$refs.xForm.updateStatus(scope)"></vxe-input>
</template>
</vxe-form-item>
<vxe-form-item title="昵称" field="nickname" span="12">
<template v-slot="scope">
<vxe-input v-model="formData2.nickname" placeholder="请输入昵称" clearable @input="$refs.xForm.updateStatus(scope)"></vxe-input>
</template>
</vxe-form-item>
<vxe-form-item title="性别" field="sex" span="12">
<template v-slot="scope">
<vxe-select v-model="formData2.sex" placeholder="请选择性别" clearable @change="$refs.xForm.updateStatus(scope)">
<vxe-option value="1" label="女"></vxe-option>
<vxe-option value="2" label="男"></vxe-option>
</vxe-select>
</template>
</vxe-form-item>
<vxe-form-item title="年龄" field="age" span="12">
<vxe-input v-model="formData2.age" type="integer" placeholder="请输入年龄" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="日期" field="date" span="12">
<vxe-input v-model="formData2.date" type="date" placeholder="请选择日期" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="地址" field="address" span="24">
<vxe-textarea v-model="formData2.address" placeholder="请输入地址" clearable></vxe-textarea>
</vxe-form-item>
<vxe-form-item align="center" span="24">
<vxe-button type="submit" status="primary">基本表单</vxe-button>
<vxe-button type="reset">重置</vxe-button>
</vxe-form-item>
</vxe-form>
</p>
<p>
<vxe-form :data="formData3" title-align="right" title-width="100" @submit="searchEvent" @reset="resetEvent" title-colon>
<vxe-form-item title="名称" field="name" span="8">
<vxe-input v-model="formData3.name" placeholder="请输入名称" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="昵称" field="nickname" span="8" :title-prefix="{ message: '请输入汉字！', icon: 'fa fa-exclamation-circle' }">
<vxe-input v-model="formData3.nickname" placeholder="请输入昵称" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="性别" field="sex" span="8">
<vxe-select v-model="formData3.sex" placeholder="请选择性别" clearable>
<vxe-option value="1" label="女"></vxe-option>
<vxe-option value="2" label="男"></vxe-option>
</vxe-select>
</vxe-form-item>
<vxe-form-item title="年龄" field="age" span="8" :title-prefix="{ message: '请输入数值！', icon: 'fa fa-info-circle' }">
<vxe-input v-model="formData3.age" type="integer" placeholder="请输入年龄" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="区域" field="region" span="8">
<vxe-input v-model="formData4.region" placeholder="请输入区域" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="状态" field="status" span="8">
<vxe-select v-model="formData3.status" placeholder="请选择状态" clearable>
<vxe-option value="0" label="失败"></vxe-option>
<vxe-option value="1" label="成功"></vxe-option>
</vxe-select>
</vxe-form-item>
<vxe-form-item title="体重" field="weight" span="8" folding>
<vxe-input v-model="formData3.weight" type="number" placeholder="请输入体重" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="日期" field="date" span="8" folding>
<vxe-input v-model="formData3.date" type="date" placeholder="请选择日期" clearable></vxe-input>
</vxe-form-item>
<vxe-form-item title="是否单身" field="single" span="8" folding>
<vxe-radio-group v-model="formData3.single">
<vxe-radio label="1">是</vxe-radio>
<vxe-radio label="0">否</vxe-radio>
</vxe-radio-group>
</vxe-form-item>
<vxe-form-item align="center" span="24" collapse-node>
<vxe-button type="submit" status="primary">折叠式表单</vxe-button>
<vxe-button type="reset">重置</vxe-button>
</vxe-form-item>
</vxe-form>
</p>
<p>
<vxe-form :data="formData4" :items="formItems4"></vxe-form>
</p>
`,
`
export default {
data () {
return {
formData1: {
name: '',
nickname: '',
sex: '1'
},
loading3: false,
formData2: {
name: '',
nickname: '',
sex: '',
age: 26,
date: null,
address: null
},
formRules3: {
name: [
{ required: true, message: '请输入名称' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符' }
],
nickname: [
{ required: true, message: '请输入昵称' }
],
sex: [
{ required: true, message: '请选择性别' }
]
},
formData3: {
name: '',
nickname: '',
sex: '',
age: 30,
status: '1',
region: null,
weight: null,
date: null,
single: '1'
},
formData4: {
name: '',
nickname: '',
sex: '0',
role: '',
age: 22
},
formItems4: [
{ field: 'name', title: '名称', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },
{ field: 'nickname', title: '昵称', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入昵称' } } },
{ field: 'sex', title: '性别', span: 8, itemRender: { name: '$select', options: [{ value: '0', label: '女' }, { value: '1', label: '男' }], props: { placeholder: '请选择性别' } } },
{ field: 'role', title: '角色', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入角色' } } },
{ field: 'age', title: '年龄', span: 8, itemRender: { name: '$input', props: { type: 'number', placeholder: '请输入年龄' } } },
{ field: 'region', title: '名称', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },
{ align: 'center', span: 24, itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: '配置式表单', status: 'primary' } }, { props: { type: 'reset', content: '重置' } }] } }
]
}
},
methods: {
submitEvent3 () {
this.loading3 = true
setTimeout(() => {
this.loading3 = false
this.$XModal.message({ message: '保存成功', status: 'success' })
}, 1000)
},
searchEvent () {
this.$XModal.message({ message: '查询事件', status: 'info' })
},
resetEvent () {
this.$XModal.message({ message: '重置事件', status: 'info' })
}
}
}
`
]
}
},
mounted () {
Array.from(this.$el.querySelectorAll('pre code')).forEach((block) => {
hljs.highlightBlock(block)
})
},
methods: {
submitEvent3 () {
this.loading3 = true
setTimeout(() => {
this.loading3 = false
this.$XModal.message({ message: '保存成功', status: 'success' })
}, 1000)
},
searchEvent () {
this.$XModal.message({ message: '查询事件', status: 'info' })
},
resetEvent () {
this.$XModal.message({ message: '重置事件', status: 'info' })
}
}
}
</script>
Reference in New Issue View Git Blame Copy Permalink