vue 采坑日记 （antd 框架）

Vue 采坑日记

登录权限篇

https://juejin.cn/post/6844903478880370701#heading-4 大佬写法

antd vue 篇

FORM modal 表单

• 匹配定义的校验规则，但校验不成功

//
<a-form-modal-item label='AA' prop="des">
	<a-select v-model="form.des">  

表单里面的v-model的值一定要放在:form定义的变量里面，prop定义同v-model的定义变量字段bi必须相同，否则校验规则会失效

• A/B按钮，B按钮点击表单内新增一个item校验，点击A按钮B的校验还存在，clearValidate失效

  //rule:{
  	xx:[
  	{
  	.....
  	}
  	],
  	新增的属性：置空
  }
  B按钮点击：this.$set(this.rule,"新增的属性",校验规则) this.$refs.form.validFields('新增的属性',(valid)=>{
  	if(！valid){成功}
  })
  A按钮：this.$nextTick(()=>{this.$refs.form.clearValidate('新增的属性')})
  
  //粗暴方法
  直接删除新增的属性
  if（新增属性） delete this.rule.新增属性
  

  radio 展示值不显示

  直接用v-model 渲染，接口赋值不生效，如果只需要渲染，先设置efault-value属性的值，再使用:value，然后在接口赋值

  select组件既可输入又可选择时当下拉框含有多个值，复制文字到select输入框内，下拉框无法滑动且点击

  在search事件里加一个此时复制过来的值是否存在于下拉框内，返回布尔值，再在此基础上对下拉框的list操作赋值（false时，推入list表，true时，过滤出表），模糊搜索

按钮交互跳到当前页面未填写的必填项的地方

必须使用setTimeout，scrollIntoView才会生效
setTimeout(()=>{document.querySelector('.'+className).scrollIntoView(true)},300)

nt.querySelector(’.’+className).scrollIntoView(true)},300)