element ui表单校验prop的链式写法----源码分析

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"><el-form-itemv-for="(domain, index) in dynamicValidateForm.domains":label="'域名' + index":key="domain.key":prop="'domains.' + index + '.value'":rules="{required: true, message: '域名不能为空', trigger: 'blur'}"><el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button></el-form-item><el-form-item><el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button><el-button @click="addDomain">新增域名</el-button><el-button @click="resetForm('dynamicValidateForm')">重置</el-button></el-form-item>
</el-form>
<script>export default {data() {return {dynamicValidateForm: {domains: [{value: ''}]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},removeDomain(item) {var index = this.dynamicValidateForm.domains.indexOf(item)if (index !== -1) {this.dynamicValidateForm.domains.splice(index, 1)}},addDomain() {this.dynamicValidateForm.domains.push({value: '',key: Date.now()});}}}
</script>

　　其中动态表单校验中用到了:prop="'domains.' + index + '.value'" 而domains 是一个数组。常规来说这么写相当于是 domains.1.value 的写法,但这种写法肯定是有问题的。没看源码不是很理解这样的链式操作。

感觉:prop="'domains.' + index + '.value'" 这种写法错误的会换成 :prop="'domains[' + index + '].value'" 这种写法, 其实看了源码之后才明白这两种写法都是正确的
1 . prop 接收的数据类型是String ,

2. :prop="'domains.' + index + '.value'" 和 :prop="'domains[' + index + '].value'" 这两种传值最终都是转换成了 domains.0.value 字符串，这是一个字符串而不是通过 domains.0 来取domains数组的第一个元素

附上部分源码

好啦，这次对表单校验的这种写法可以理解了吧！

转载于:https://www.cnblogs.com/hellobeen/p/9766572.html

element ui表单校验prop的链式写法----源码分析相关推荐

vue+element ui表单校验（邮箱、电话、工商信息）
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
vue 3.0记录Element UI 表单使用(看了隔壁小孩儿都会用的Element UI 表单组件使用)
Element UI 表单使用记录 element ui 表单 input 文本域日期选择中国标准时间与xxxx-xx-xx格式时间之间的来回切换中国标准时间转换为xxxx-xx-xx格式 ...
element UI 表单自定义验证，css水平且垂直居中方法
element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证首先是element UI 提供的基础 ...
form generator ——Element UI表单设计及代码生成器
form generator Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中. 网站地址:https://mrhj.gitee.io/form-ge ...
Golang|区块链UTXO集源码分析
区块链UTXO集源码分析资源 go实现区块链前提在未实现UTXO集之前,假设系统需要查询某个钱包地址的余额,系统需要遍历区块链的所有区块,当区块链非常长时,这种做法的成本太高了. UTXO集是未 ...
vue开源Element UI表单设计及代码生成器
1 可视化设计器设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代码可直接运行在基于 Element 的 vue 项目中. github仓库 https:// ...
java servlet是单例吗_SpringMVC中DispatchServlet是单例还是多例（附源码分析）
一开始我只知道DispatchServlet是在web.xml中配置的,所以想当然的以为是单例,但结果和我预想的是有出入的. 一.servlet规范因为DispatchServlet也是Servle ...
element ui 表单验证为正整数
很多时候都会用表单中输入正整数的情况,在element ui中可以用el-input-number 标签来显示输入框是number类型的,或者type="number"也可以的,但 ...

element ui表单校验prop的链式写法----源码分析

element ui表单校验prop的链式写法----源码分析相关推荐

最新文章

热门文章