ant design vue初次使用 心得记录

Ant design初次使用心得

介绍

初次使用阿里下的vue开源UI插件，之前都是用饿了么开发的UI插件element ui，两者比较，element上手很快，理解起来容易，但是对于一个后台管理系统的开发来说，数据分散，不易维护；ant design的table和form的生成，都可以通过json实现，且json的格式也容易理解，代码看起来十分简洁；我更喜欢ant design的这种开发模式。

按钮

ant design定义的按钮的颜色只有两个，明显不够用，所以在使用时必须自己定义按钮
在定义按钮的css时，注意加上line-height: 1.499;outline:none;
这里推荐一个css的按钮网站，虽然按钮样式不多，但已经够用
另外可以直接使用ant design的color
再加一个颜色网站或者直接上优设网找合适的颜色网站

表格

因为表格和表单中的title都是一样的，所以建议:
1.先写一个属性名与名称对应的key：value的json，例如{id: ‘编号’, name: ‘名称’}
2.再写一个属性名与样式等对应的json，例如：{id: {width: ‘120px’, align: ‘right’, fixed: ‘left’}
3.最后写一个函数，将上面两者合成一个，最后数据 ：[{title: ‘编号’, dataIndex: ‘id’, width: ‘120px’, align: ‘right’, fixed: ‘left’}]
其中，第3步使用的函数，每个表都可以使用，即为公共函数

表单

ant design的表单与element的表单使用方式太不一样，导致在使用时入坑多次
问题一：不能使用v-model，改用函数this.form.setFieldsValue({key:value}),同时在初始化时应使用setTimeout:
setTimeout(()=>{
this.form.setFieldsValue({‘id’: ‘’})
},0)
以及获取值函数this.form.getFieldValue(key)
问题二：
select不能直接限制选的个数，这里附上前辈们解决的方法的网址
https://blog.csdn.net/weixin_30872733/article/details/98038195

设计

1. 写一个json，包含rules，最后与表格中写的第一个json合成所需json
2. 传入form对象，传入form数据，写一个赋值函数
3. 传入form对象，传入所需的form字段，获取form数据
   该设计暂未实现，所以只有设计且没有例子，下次真正实现后再修改