官网：https://vxeui.com
<template><div><vxe-formv-bind="formOptions"@submit="submitEvent"@reset="resetEvent"></vxe-form></div>
</template><script>
import { VxeUI } from 'vxe-pc-ui'export default {data () {const formOptions = {validConfig: {theme: 'beautify'},data: {name: '',nickname: '',sex: '',age: ''},rules: {name: [{ required: true, message: '请输入名称' }],sex: [{ required: true, message: '请选择性别' }],age: [{ required: true, message: '请输入年龄' }]},items: [{ field: 'name', title: '名称', span: 24, itemRender: { name: 'VxeInput' } },{ field: 'sex', title: '性别', span: 12, itemRender: { name: 'VxeInput' } },{ field: 'age', title: '年龄', span: 12, itemRender: { name: 'VxeInput' } },{align: 'center',span: 24,itemRender: {name: 'VxeButtonGroup',options: [{ type: 'submit', content: '提交', status: 'primary' },{ type: 'reset', content: '重置' }]}}]}return {formOptions}},methods: {submitEvent () {VxeUI.modal.message({ content: '保存成功', status: 'success' })},resetEvent () {VxeUI.modal.message({ content: '重置事件', status: 'info' })}}
}
</script>
https://gitee.com/x-extends/vxe-pc-ui
