浅谈Ant Design of Vue(一)
关于Ant Design of Vue的一些坑刚接触Ant Design of Vue的时候十分头疼,因为之气接触的不是这种后台管理类型的UI框架,但因公司需要,还是开始熟悉了起来。1. 表格:标签:<a-table>表格标签渲染数据必须加key,负责会报重复渲染的错误{key: 0, // 避免重复渲染,并且是唯一标识date: '2018-02-11',amount: 120,ty
·
关于Ant Design of Vue的一些坑
刚接触Ant Design of Vue的时候十分头疼,因为之前接触的不是这种后台管理类型的UI框架,
但因公司需要,还是开始熟悉了起来。
1. 表格:
标签:<a-table>
表格标签渲染数据必须加key,负责会报重复渲染的错误(可替换变量名)
{
key: 0, // 避免重复渲染,并且是唯一标识
date: '2018-02-11',
amount: 120,
type: 'income',
note: 'transfer',
}
2.树状图:
标签:<a-tree>
树状图是通过数据的childen来进行下级的展示,可以与表格合起来用,树状图的key也是需要唯一标识来指定,不然不会进行复用。
表格跟树状图合起来用的案例:
<a-table :columns="columns" :data-source="data" :row-selection="rowSelection" />
// 数据
const data = [
{
key: 1,
name: 'John Brown sr.',
age: 60,
address: 'New York No. 1 Lake Park',
children: [
{
key: 11,
name: 'John Brown',
age: 42,
address: 'New York No. 2 Lake Park',
}]
}]
效果图:因为数据都在后台我这边就拿官方文档来演示
3.表单
标签:<a-form>
表单的坑的话就是遇到了这个:
<a-input
v-decorator="['weiXin',
{rules: [
{ required: false},
{ max: 20, message: '长度不能超过20个字符'}
]}]"/>
v-decorator:可以指定输入框的规则非常好用,但是当他获取数据的时候跟vue的v-model在一起的话就是非常不友好了他阻碍了双向绑定。我开始的思路是通过父组件点击把参数传递给子组件,然后子组件接收到后,用一个变量存起来,但是一直都是获取不到。
<a-form-item label='微信号' v-bind="formItemLayout">
<a-input v-model="com.weiXin"
v-decorator="['weiXin',
{rules: [
{ required: false},
{ max: 20, message: '长度不能超过20个字符'}
]}]"/>
</a-form-item>
数据:
com: {
userName: '',
phone: '',
telPhone: '',
email: '',
weiXin: ''
}
当我想通过复制给com.weiXin里面的值来让表单有初始值的时候发现不起效果,差点让我自闭。
后面多方查询后才知道,使用v-decorator验证后,只能通过官方API来进行赋值,才会起效果。
setFormValues (user) {
let fields = ['userName', 'phone', 'telPhone', 'id', 'email', 'weiXin']
Object.keys(user).forEach((key) => {
if (fields.indexOf(key) !== -1) {
this.form.getFieldDecorator(key)
let obj = {}
obj[key] = user[key]
this.form.setFieldsValue(obj)
}
})
必须通过指定的getFieldDecorator(key) setFieldsValue(obj)进行添加后才会显示出来。
更多推荐
已为社区贡献1条内容
所有评论(0)