iview隐藏可拓展写法

最新推荐文章于 2022-10-13 15:59:22 发布

伏见伊奈里

最新推荐文章于 2022-10-13 15:59:22 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： iview vue 表单 form

本文链接：https://blog.csdn.net/qq_35313994/article/details/99974985

版权

vue 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

表单单个验证

听过form绑定的ref找到当前form,如form的**ref="form1"**,单个表单的**prop为"val"**。然后通过```this.$refs[form1].validateFiedld((val)```

此场景适用于循环表单验证，当其中一个值改变时，能验证另一个依赖值

单个输入框动态添加验证数据输入格式不对的提示样式，可以通过给form-item绑定error属性

如下：通过给error绑定事件，return为空字符串时，验证状态正确；return为对应错误提示内容时，验证状态变为error，同时错误提示为return内容

<FormItem
                v-for="(item, index) in formDynamic.items"
                :key="index"
                :prop="'items.' + index + '.value'"
                 :error="getE(index,'')"
                :rules="{required: true, message: 'item.index +' can not be empty', trigger: 'blur'}">
                <Input type="text" v-model="item.value" placeholder="Enter something..."></Input>
        </FormItem>

methods: {
           
         getE(i,c){
           return ""
         },
         }

error后可以绑定方法或者变量* ,表单域验证错误信息, 设置该值会使表单验证状态变为error，并显示该错误信息

循环渲染form里的input时，通过给form-item绑定rule，来绑定自己写的正则表达式

 <i-form :model="formData" ref="chart1">
                                               <div class="from-group ivu-col" :class="colName"
                                                   v-for="(item, index) in formData.formItem" :key="index">
                                                   <div class="group-item">
                                                       <form-item :prop="'formItem.' + index + '.poorVillNum'"
                                                           :rules="valPra">
                                                           <i-input :maxlength="10" v-model="item.poorVillNum"
                                                               placeholder="请输入">
                                                           </i-input>
                                                       </form-item>
                                                   </div>
</div>
</i-form>

 var REPORT = new Vue({
    el: '#report',
    data:function() {
			const valNumber= function(rule, value, callback) {
            console.log(value)
            console.log('77777777777')
			if (!value) {
				callback();
			}
			// 模拟异步验证效果
			setTimeout(function() {
				if (/^\d+(\.\d{1,2})?$/.test(value)) {
					callback();
				} else {
					callback(new Error('请输入小数点两位以内数'));
				}
			}, 800);
		};
		return {
			valPra: { validator: valNumber, trigger: 'blur' },
		}
    },
    })

table

table的tittle复制时\显示不出来
解决方法使用两个\

columns: [
            {
               title: 'Date\\Month',
                key: 'date'
            }
       	]
                   ```
                   ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191114154229162.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzEzOTk0,size_16,color_FFFFFF,t_70)
                   ![在这里插入图片描述](https://img-blog.csdnimg.cn/2019111415424421.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzEzOTk0,size_16,color_FFFFFF,t_70)