element-ui里，對(duì)于通過(guò)v-for渲染的el-form-item組件，是否有方法使用自帶的表單驗(yàn)證？

官方文檔對(duì)保單驗(yàn)證功能的描述在此處：http://element-cn.eleme.io/#/...

在官方文檔中，所舉的例子都是單個(gè)組件，如果使用 v-for ，則 prop 屬性處出現(xiàn)了變量
例如:

<el-form-item class="form-half" v-for="(param, index) in editorData['params']" prop="params[index]['value']" :label="param.name" :key="param.name">
          <el-select v-model="param.value" placeholder="Select param">
            <el-option v-for="choice in param.range" :value="choice" :key="choice"></el-option>
          </el-select>
</el-form-item>

這種寫(xiě)法是失效的。因?yàn)?prop 里貌似只能填一個(gè)固定的路徑值。那么這里 prop 屬性該怎么寫(xiě)，是不是無(wú)法使用？

回答

編輯回答

慢半拍

正好最近做過(guò)這種校驗(yàn)，多段工作經(jīng)歷的例子

<div class="content-inner" :key="index" v-for="(experience, index) in resumeData.workExperiences" >
    <el-form-item :prop="'workExperiences.' + index + '.company'" label="公司" label-position="top" :rules="rules.experienceRule.company">
        <el-input class="input-item" v-model="experience.company"></el-input>
    </el-form-item>
</div>

rules.js代碼示例：

export const rules = () => {
    return {
        experienceRule: {
            company: [
                { required: true, message: '公司名不能為空', trigger: 'blur' },
                { min: 1, max: 128, message: '不能超過(guò) 128 個(gè)字符', trigger: 'change, blur' },
                {  validator: validDangeroutStr, trigger: 'change, blur' }  //validator為自定義校驗(yàn)
            ]
        }
    }
}

2017年3月18日 03:27

編輯回答

糖豆豆

看一下文檔：http://element-cn.eleme.io/#/...

<el-form-item

prop="email"
label="郵箱"
:rules="[
  { required: true, message: '請(qǐng)輸入郵箱地址', trigger: 'blur' },
  { type: 'email', message: '請(qǐng)輸入正確的郵箱地址', trigger: 'blur,change' }
]"

直接把rules寫(xiě)到動(dòng)態(tài)的寫(xiě)到標(biāo)簽里邊

2018年8月17日 20:56

編輯回答

無(wú)標(biāo)題

:prop="params[index]['value']"

2018年7月1日 17:32

編輯回答

耍太極

正確寫(xiě)法應(yīng)該是 :prop="`params.${index}.value`" 或者 :prop="'params.'+index+'.value'"
rules寫(xiě)在<el-form-item>標(biāo)簽中

element-ui官方文檔表單驗(yàn)證中的動(dòng)態(tài)增減表單項(xiàng) 中有提及v-for情況下的表單驗(yàn)證，下面貼上demo代碼

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item
    prop="email"
    label="郵箱"
    :rules="[
      { required: true, message: '請(qǐng)輸入郵箱地址', trigger: 'blur' },
      { type: 'email', message: '請(qǐng)輸入正確的郵箱地址', trigger: 'blur,change' }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>
  <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'
    }"
  >
    <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: ''
          }],
          email: ''
        }
      };
    },
    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>

2017年1月31日 01:37