使用Vue3+Ant Design Vue pro搭建后台管理系统

使用Vue3+Ant Design Vue pro搭建后台管理系统表单验证方面安迪赞vue提供了from表单项在item里可以添加自定义内容当然每个选项输入框或者下拉框都需要绑定验证规则，安迪赞vue的验证规则我采用了下面这种方式绑定在setup里定义双向绑定数据项数据项的名字要和表单内容双向绑定的一直每一个括号对应一个自身的验证规则，它可以对应很多项验证规则定义完验证给i则需要和表单内

Mangoxin1

4369人浏览 · 2021-05-28 18:15:57

Mangoxin1 · 2021-05-28 18:15:57 发布

使用Vue3+Ant Design Vue pro搭建后台管理系统

表单验证方面

安迪赞vue提供了from表单项在item里可以添加自定义内容当然每个选项输入框或者下拉框都需要绑定验证规则，安迪赞vue的验证规则我采用了下面这种方式绑定

在这里插入图片描述

在setup里定义双向绑定数据项数据项的名字要和表单内容双向绑定的一直

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1017IqMD-1622196802789)(C:\Users\Mango\AppData\Roaming\Typora\typora-user-images\image-20210528173607943.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ypS3nfPq-1622196802791)(C:\Users\Mango\AppData\Roaming\Typora\typora-user-images\image-20210528173707676.png)]$

每一个括号对应一个自身的验证规则，它可以对应很多项验证规则

定义完验证给i则需要和表单内容绑定在一起，这个时候需要用到安迪赞vue的表单验证api，

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Cb6spMf-1622196802792)(C:\Users\Mango\AppData\Roaming\Typora\typora-user-images\image-20210528173838682.png)]$

然后用他们进行绑定，下面的useForm第一项是输入框双向绑定的数据项

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IGCiLvOZ-1622196802794)(C:\Users\Mango\AppData\Roaming\Typora\typora-user-images\image-20210528173902662.png)]$

，第二个验证规则的数据项，从这个api里可以解构出他的很多功能，第一个resetfielids是清楚表单内容，第二个是表单验证通过的promise，如果验证通过了就会进到then里面，可以在这个里面进行验证成功的操作，第三个validate是第一张图v-bind绑定的值，第四个clearValidate是清楚表单验证，需要name对应上

在这里插入图片描述

最后，return出表单验证数据项，输入内容数据项，sueForm解构出来的三个功能
2021/6/1

table表格

在这里插入图片描述
在安迪赞里，一个table的代码可谓说是简单到极致，用起来也特别舒服，当我们使用安迪赞table的时候，他会有个columns属性，这个属性我们可以自定义插槽内容，比如说一个删除按钮，比如说对一些数据进行处理都可以用到它
在这里插入图片描述

在这里插入图片描述
在script标签里可以定义插槽内容，也可以在setup里定义，插槽如果写了的话，slots里面的customRender必须要对应上后台传来的名字，所以我们把dataindex和customRender尽量一致

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}$/, //不连续的两位字母// /^