官網:https://vxeui.com
<template>
<div>
<vxe-form
v-bind="formOptions"
@submit="submitEvent">
</vxe-form>
</div>
</template>
<script>
import { VxeUI } from 'vxe-pc-ui'
export default {
data () {
const formOptions = {
titleWidth: 100,
titleColon: true,
titleAlign: 'right',
data: {
name: 'test1',
role: '',
nickname: 'Testing',
sex: '',
age: '',
num: '',
createDate: '',
updateDate: ''
},
items: [
{ field: 'name', title: '名稱', span: 12, itemRender: { name: 'VxeInput' } },
{ field: 'nickname', title: '暱稱', span: 12, itemRender: { name: 'VxeInput' } },
{ field: 'role', title: '角色', span: 12, folding: true, itemRender: { name: 'VxeInput' } },
{ field: 'sex', title: '性別', span: 12, folding: true, itemRender: { name: 'VxeInput' } },
{ field: 'age', title: '年齡', span: 12, folding: true, itemRender: { name: 'VxeInput' } },
{ field: 'num', title: '大小', span: 12, folding: true, itemRender: { name: 'VxeInput' } },
{ field: 'createDate', title: '建立時間', span: 12, folding: true, itemRender: { name: 'VxeInput' } },
{ field: 'updateDate', title: '更新時間', span: 12, folding: true, itemRender: { name: 'VxeInput' } },
{
align: 'center',
span: 24,
collapseNode: true,
itemRender: {
name: 'VxeButtonGroup',
options: [
{ type: 'submit', content: '搜尋', status: 'primary' },
{ type: 'reset', content: '重置' }
]
}
}
]
}
return {
formOptions
}
},
methods: {
submitEvent () {
VxeUI.modal.message({ content: '儲存成功', status: 'success' })
}
}
}
</script>
https://gitee.com/x-extends/vxe-pc-ui