vue如何封装form表单组件拒绝重复写form表单

本篇内容主要讲解“vue如何封装form表单组件拒绝重复写form表单”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue如何封装form表单组件拒绝重复写form表单”吧!通过配置js文件的变量，使用vue的is属性动态切换组件，默认显示的组件为el-input通过element的分栏和栅格属性，对form表单进行响应式布局baseForm在组件初始化时，需要动态添加校验规则、请求接口以及初始化form的部分值正统思想是对element组件的各个组件进行二次封装，然后通过is属性切换二次封装后的组件，在此不做过多描述，有兴趣的朋友可以自行研究更好的思想是将页面请求、搜索项、表格、分页封装到一起，形成一个整体，这也是我们前端小组目前的处理思路任何标签或者组件都可以通过vue的is属性来动态切换组件。本组件中使用div，将它的宽度设置为100%，使得element组件能够完全撑开。(使用vue内置组件component会与el-radio-group相冲突，因为它底层就是用component实现的)表单上添加validate-on-rule-change="false"属性，防止在表单初始化时就校验表单当为对象添加不存在的字段属性时，需要使用$set实现数据的响应式如果form表单中只有一个输入框，在输入框中按下回车会提交表单，刷新页面。为了阻止这一默认行为，需要在el-form标签上添加@submit.native.prevent使用lodash中的get方法获取对象的属性值，如果属性值不存在，可以给一个默认值baseForm子组件中可以传一个form对象给父组件，那么添加或者编辑form对象，就都可以在父组件中进行。(`:value以及@input`)进行双向绑定(本组件写得比较基础，目前仅支持element的五个常用组件)：formSize (表单中各element组件的整体大小)column数组中每一个对象对应的字段(非请求接口)：label (表单label的名称)span (这个表单项占据的份数，一行为24，默认为12)labelWidth (这个表单项的label宽度，默认为90px)labelHeight (这个表单项占据的高度，默认为50px)slotName (插槽名)prop (这个表单项绑定的属性名称)size (这个表单项组件的大小，默认为small)disabled (是否禁用这个表单项)type (使用的element组件，默认为el-input)dic (非接口请求的静态表单数据,使用{label以及value字段}表示的数组形式)column数组中每一个对象对应的字段(请求接口)：url (接口的api地址)requestParams (非必填项，需要额外传入的传参)requestLabel (接口返回对应的id)requestValue (接口返回对应的value)添加：如果是添加状态，直接在父组件中引入就好。在点击确定按钮时，拿到子组件的ref并进行表单校验。校验通过后，使用后端定义好的接口进行传参；编辑：如果是编辑状态，则需要在父组件页面初始化时，将后端返回的数据使用$set进行初始赋值，其余操作同添加状态。到此，相信大家对“vue如何封装form表单组件拒绝重复写form表单”有了更深的了解，不妨来实际操作一番吧！这里是百云主机网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！免责声明：免费云主机域名本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@byun.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

相关推荐: Spring如何加载properties文件

这篇文章主要介绍“Spring如何加载properties文件”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Spring如何加载properties文件”文章能帮助大家解决问题。spring第三方资源配置管理Druid…