Ant Design vue v-decorate 进行数据绑定
这里先说一下v-decorator指令:
v-decorator
下面是form表单内的文本输入框,使用了v-decorate进行数据绑定:
<a-input placeholder="请输入名称" v-decorator="['name', { rules: [{ required: true, message: '请输入名称!' }] }]"></a-input>
这个是v-decorate的用法,类似于v-model,但是v-decorator可以更方便的添加校验,必填项等;v-model可以更方便地获取值以及设置值,这个是二者在开发时最明显的区别(其他的我暂时没发现)。
这里是主要讲v-decorator,因为表单内使用这个指令。
form
使用表单有最重要的一点:就是表单a-form需要使用this.form属性,就必须进行包装,如下图:
这个是官网API给的用法。
所以,在使用时要添加:
<a-form layout="inline" :form="form"><a-form-item label="名称:"><a-input placeholder="请输入名称" v-decorator="['name', { rules: [{ required: true, message: '请输入名称!' }] }]"></a-input></a-form-item>
</a-form>
这里使用的template语法,form必须在data内定义:
form: this.$form.createForm(this),
这是表单的设置。
form设置值
当对form值进行定义后,后面就可以使用this.form来获取表单内的东西了。
习惯在表单设置值前添加:this.form.resetFields();
设置值的方式是:this.form.setFieldsValue();
方式一:
然后进行设置值:
this.form.setFieldsValue({name: this.data.name,age: this.data.age
})
这里的name就是上述a-input标签内的name属性。这种方法适合参数少的情况。
方式二(个人更喜欢这种,因为参数真的不少T_T):
需要先在data内定义 model: {} 对象,后面使用model设置,而且需要导入lodash的pick函数:
this.form.resetFields();
this.model = Object.assign({}, this.record);
this.$nextTick(() => {this.form.setFieldsValue(pick(this.model, ',name', 'age'))
});
这里的 Object.assign()等于是深拷贝赋值对象,record是我拿到的需要设置进文本框的值,这里的pick参考lodash的pick。
重点是这几个,this.$nextTick可以看这篇。
这个方式等于是将值统一放在 model这个对象内,然后将你需要设置进去的值,通过pick从this.model内选择得到,最后通过this.form.setFieldsValue(); 设置进去即可。
刚才说了设置值,接下来就是获取值。
form获取值
这个相对简单一些:
this.form.validateFields((err, values) => {if (!err) {console.log('Received values of form: ', values);// do something}
})
这里的values就是你需要拿到的表单内的所有值,打印可以看到的,拿到之后就可以进行其他操作啦
具体能写这么多啦,欢迎补充指教!
————————————————
版权声明:本文为CSDN博主「DOM曼珠沙华」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/a18792627168/article/details/108201832
Ant Design vue v-decorate 进行数据绑定相关推荐
- ant design Vue 纯前端实现分页
ant design Vue 纯前端实现分页功能 (有选择的话最好让后端分页,前端分页可能会有问题,为了性能,尽量不要前端分页) 自己想的一个简单方法: 通过页码改变事件,每页数据个数改变事件,获取改 ...
- Ant Design Vue 如何获form表单里数据 并给 v-decorator绑定的数据重新赋值
最近在用ant design vue 做项目 遇到了 一下坑 比如 v-decorator 可以做数据 绑定 与v-model 不同的是 给 form 表单赋值 v-model 的值是 双向绑定的 如 ...
- Ant Design Vue select下拉列表设置默认值
在项目中需要为Ant Design Vue 的 select 组件设置一个默认值,如下图所示的状态下拉选择框,默认选择全部 代码如下: 1 <a-select v-model="que ...
- iviewui php,Vue UI框架对比:Element UI、Ant Design Vue、iView
Element UI 文档:https://element.eleme.io/#/zh-CN/component/installation vue-element-admin预览:https://pa ...
- 解决ant design vue中的modal弹框样式修改无效问题 修改modal样式无效
ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的 原因在于弹框modal被挂载在最大的元素div外面了 所以需要将挂载在某个html元素上 在modal外 ...
- 【Ant Design Vue】之Grid栅格和Space间距
文章目录 Grid 栅格 Space 间距 Grid 栅格 Ant Design Vue 将整个设计建议区域按照 24 等分的原则进行划分,划分之后的信息区块我们称之为『盒子』.建议横向排列的盒子数量 ...
- Vue笔记-Ant Design Vue构建前端连接后端WebSocket
运行结果如下: 程序结构如下: 关键代码: App.vue <template><a-layout class="layout"><a-layout- ...
- vue将每个路由打包成html,Ant Design Vue pro 动态路由的实现和打包
Ant Design Vue pro 动态路由的实现和打包 Ant Design Vue pro 动态路由的实现和打包 配置路由权限 在config文件夹下router.config.js中配置路由权 ...
- ant design vue pro 支持多页签模式 页签可以缓存
ant design vue pro 支持多页签模式 页签可以缓存 代码贴在最后 启动之后页面是这样的: 第一步:修改 src/layouts/BasicLayout.vue 文件,在该文件中添加mu ...
- 记录ant design vue a-select Form编辑时回显数据库数据为value而不是label的问题
记录ant design vue a-select Form编辑时回显数据库数据为value而不是label的问题 先贴解决后的代码 option遍历的集合格式如下 解释 官方文档中解释到select ...
最新文章
- NeurIPS 2021 | 寻MixTraining: 一种全新的物体检测训练范式
- pageHelper插件
- Windows 2012 下Redmine安装和环境搭建
- 前端 html结合css-1篇
- 1._请写出5种以上的android中界面常用布局方式,跳槽季“充电宝”Android面试题(一)...
- python自学教程-3D图示Python标准自学教程入门篇
- common.css
- 计算机知识说明,请说明计算机的工作原理
- .net连接SqlServer数据库
- mysql写保护_简易修改注册表!小白都会去掉u盘写保护
- 形式化验证工具——prism(1-安装)
- 第二期:关于大数据相关的问答汇总,关注持续更新中哦~
- 什么是Cisco ACI?
- VirtualBox安装及网络配置
- sql语句中case when及select case when的用法
- 数字逻辑——七段数码管
- 阿里云对象存储(oos)
- SM4250平台typec耳机检测
- 基于WebSocket实现网页聊天室
- 同态算法FHEW笔记