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