浅谈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,
    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)进行添加后才会显示出来。

  • 3
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值