动态表单校验

在前期博文《Vue进阶（三十）：vue中使用element-ui进行表单验证》、《Vue进阶（幺幺叁）：关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题》、《Vue进阶（幺贰幺）：表单校验注意事项》中主要讲解了form表单校验应遵守的约定及常见问题解决方法。在实现动态表单，且表单项为后台动态生成时，若form表单属性不存在，但是在data中rules下定义了表单属性的校验规则，IE下就会给出相应的错误提示："please transfer a valid prop path to form item"

那么，就需要通过更换表单校验方式来解决。
可直接在<el-form-item>中添加rules，

<!--处理建议-->
<el-form-item :label="$t('pendingInfo.processInfo.lettopin')" prop="lettopin" v-if="oponionArr.length > 1 && oponionArr[1].isdisplay === '1'"
     :rules="[{required: oponionArr.length > 1 && oponionArr[1].isinput === '1', message: $t('flowManage.ChgOprPsn.message.plsApprOpropin'), trigger: 'blur'},
               {min: 0, max: 1000, message: $t('gplssignal.message.maxthousand'), trigger: 'blur'}]">
<cc-input type="textarea" :rows="4" style="width: 77%; word-break: break-all;"
   v-model="formCommit.lettopin" :placeholder="$t('flowManage.ChgOprPsn.message.inputContent')"
   :maxlength="1000"
   @blur="formCommit.lettopin = formCommit.lettopin.trim()">
</cc-input>

以上便实现了动态表单下表单属性校验。

项目开发过程中，需要实现操作栏位图标按钮与文字按钮切换效果，在实现文字按钮过程中，大致思路如下：操作栏位只展示前2个菜单，之后的菜单采用更多方式展示，通过点击更多展示其余菜单按钮。
实现代码如下：

<template slot-scope="scope">
	<el-dropdown :split-button="false" trigger="click" type="text" @command="handleCommand" class="dropdown el-dropdown-link">
    <span>
    	更多
        <i class="el-icon-caret-bottom el-icon--right"></i>
    </span>
	    <el-dropdown-menu slot="dropdown" v-if="!!user.hobbies && user.hobbies.length > 0">
       	 <template v-for="item in user.hobbies">
            <el-dropdown-item @click.native="toMethod(item.methodnm, scope.row)">{{ item.name }}</el-dropdown-item>
      	  </template>
 	   </el-dropdown-menu>
	</el-dropdown>
</template>
<script>
	export default {
		methods: {
			toMethod (methodnm, inputParam) {
				switch (methodnm) {
					case 'a':
						aMethod(inputParam)
						break
					case 'b':
						aMethod(inputParam)
						break
					...
				}
			}
		}
	}
</script>