vue中的几种校验方式

Posted 2023-04-26

参考技术A 动态生成表格时，需要逐行校验，因而采用行内校验方式更为合理

el-form-item下可嵌套el-table，但双向绑定只能通过插槽获得，通过v-model绑定，这里有个需要注意的是prop必须加上，随便给一个值就可以触发，不加的话有时会不触发。

其中:prop="'disActReviewTransfers.' + index + '.reflectedUser'"必须按照这样的格式，disActReviewTransfers为form中对应的数组字段，index为循环索引，reflectedUser为数组中一项(对象)的字段。

像这种行内自定义校验函数应该写在methods中进行校验

需要注意的是 此处的reviewReportValid需要写在如上位置，不能写在methods中。

Vue 之 路由常用的几种传参方式

Vue 之 路由常用的几种传参方式

• • 第一种方式
  • 第二种方式
  • 第三种方式

第一种方式

必须在路由的path上配置相关参数

路由配置（必须）：

{ path: '/details/:id', name: 'Details', component: Details }

传参

toDetails(id){
	this.$router.push({ path: `/details/${id}` })
}

获取参数

mounted() {
	let id = this.$route.params.id
}

注：传递的参数显示在地址栏上.
 

第二种方式

不需要路由有其他额外的配置

路由配置：

{ path: '/details', name: 'Details', component: Details }

传参

toDetails(id){
	this.$router.push({ 
		name: `Details` // 这里使用的是路由配置里面的name值
		params: {
			id: id
		}
	})
}

获取参数

mounted() {
	let id = this.$route.params.id
}

注：传递的参数不显示在地址栏上，刷新页面数据会丢失.
 

第三种方式

不需要路由有其他额外的配置

路由配置：

{ path: '/details', name: 'Details', component: Details }

传参

toDetails(id){
	this.$router.push({ 
		path: `/details`
		query: {
			id: id
		}
	})
}

获取参数

mounted() {
	let id = this.$route.query.id
}

注：传递的参数会显示在地址栏上，中文会进行相应的转码.