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数据
    该设计暂未实现，所以只有设计且没有例子，下次真正实现后再修改
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue