render 动态增减表单项校验 小结

1  element-ui  form表单动态增减表单项校验：

<el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'域名' + index" :key="domain.key" :prop="'domains.' + index + '.value'" :rules="{ required: true, message: '域名不能为空', trigger: 'blur' }" >

:prop="'domains.' + index + '.value'"

理解：

官网说的prop传入form组件的model中的字段，string类型，组件应该会通过<el-form :model='dynamicValidateForm'>这里去找，所以'domains.'+index+'.value'去找dynamicValidateForm.domains[${index}].value,找到对应的model字段

2 vue render列表，createElement 生成element  el-tooltip失效

render:(h,{column})=>{

　　return h('el-tooltip',{props:{effect:'light',content:'提示信息',placement:'top'}},[h('span',content]))

}

这样可以生效，content过长需要换行，使用slot content   失效

render:(h,{column})=>{

　　return h('el-tooltip',{props:{effect:'light',placement:'top'}},[h('div',{props:{slot:'content'}},content),h('span',content)])

}

解决办法：

1 还是使用createElement 使用全局组件

1.1 创建组件

<template>
    <el-tooltip popper-class='popper' :placement="placement" :disabled='content.length<max' :effect="effect">
        <div slot="content" class='content'>{{content}}</div>
            <p v-if='content.length==0'>-</p>
            <p class='left_align' v-else>{{content.length>max?content.slice(0,max)+'...':content}}</p>
    </el-tooltip>
</template>
<script>
export default{
    props:{
        content:{type:String,default:''},
        max:{type:Number,default:100},
        effect:{type:String,default:'light'},
        placement:{type:String,default:'top'},
    }
}
</script>

1.2 注册全局

import Vue from 'vue';
Vue.component('ex-tool-tip',toolTip);

1.3 使用

render:(h,{column})=>{
　　return h('ex-tool-tip',content) 
}

实现效果

方法2：使用jsx, vue官网：

2.1 安装依赖

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

2.2 配置文件.babelrc

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ['@vue/babel-preset-jsx',
      {
        'injectH': false
      }]
  ]
}

2.3 实现

render:(h,{column})=>{

 return (
 <el-tooltip class="tooltip" effect="dark" placement="right">
  <ul slot="content">
  <li>这是第一个提示</li>
  <li>这是第二个提示<li>
  </ul>
  <i class="el-icon-question"></i>
 </el-tooltip>
 );
}