使用Vue3+Ant Design Vue pro搭建后台管理系统
使用Vue3+Ant Design Vue pro搭建后台管理系统表单验证方面安迪赞vue提供了from表单项 在item里可以添加自定义内容 当然每个选项输入框或者下拉框都需要绑定验证规则 ,安迪赞vue的验证规则我采用了下面这种方式绑定在setup里定义双向绑定数据项 数据项的名字要和表单内容双向绑定的一直每一个括号对应一个自身的验证规则 ,它可以对应很多项验证规则定义完验证给i则需要和表单内
使用Vue3+Ant Design Vue pro搭建后台管理系统
表单验证方面
安迪赞vue提供了from表单项 在item里可以添加自定义内容 当然每个选项输入框或者下拉框都需要绑定验证规则 ,安迪赞vue的验证规则我采用了下面这种方式绑定
在setup里定义双向绑定数据项 数据项的名字要和表单内容双向绑定的一直
每一个括号对应一个自身的验证规则 ,它可以对应很多项验证规则
定义完验证给i则需要和表单内容绑定在一起,这个时候需要用到安迪赞vue的表单验证api,
然后用他们进行绑定,下面的useForm第一项是输入框双向绑定的数据项
,第二个验证规则的数据项,从这个api里可以解构出他的很多功能,第一个resetfielids是清楚表单内容,第二个是表单验证通过的promise,如果验证通过了就会进到then里面,可以在这个里面进行验证成功的操作,第三个validate是第一张图v-bind绑定的值,第四个clearValidate是清楚表单验证,需要name对应上
最后,return出表单验证数据项,输入内容数据项,sueForm解构出来的三个功能
2021/6/1
table表格
在安迪赞里,一个table的代码可谓说是简单到极致,用起来也特别舒服,当我们使用安迪赞table的时候,他会有个columns属性,这个属性我们可以自定义插槽内容,比如说一个删除按钮,比如说对一些数据进行处理都可以用到它
在script标签里可以定义插槽内容,也可以在setup里定义,插槽如果写了的话,slots里面的customRender必须要对应上后台传来的名字,所以我们把dataindex和customRender尽量一致
更多推荐
所有评论(0)