对象数据结构如下:
content: {
language: [],
"zh": {},
"en": {},
"kr": {},
}
需求:
需要通过勾选语言来生成多语言表单进行验证,需要通过zh、en、kr作为key进行数据的绑定,官网给的例子不满足我这样的数据结构(注:和el-form官网给的例子不一样)html代码如下:
<el-form :ref="'ruleForm' + itemTypeIndex + rightData.pageType" :model="item.content"
label-width="120px" :rules="formRules">
<el-form-item label="多语言" prop="language">
<el-checkbox-group v-model="item.content.language"
<el-checkbox label="zh" value="zh">中文</el-checkbox>
<el-checkbox label="en" value="en">英文</el-checkbox>
<el-checkbox label="kr" value="kr">韩文</el-checkbox>
</el-checkbox-group>
</el-form-item>
<div class="styleTypeWarp">
<div class="styleType-item" v-for="(ele, ind) in item.content.language"
:key="ind">
<h6>{{ languageObj[ele] + "内容" }}</h6>
<el-form-item label="标题" :prop="ele + '.title'">
<el-input type="textarea" v-model="item.content[ele].title">
</el-input>
</el-form-item>
<el-form-item label="标题文字颜色">
<el-input v-model="item.content[ele].titleColor" disabled>
</el-input>
</el-form-item>
<el-form-item label="正文" :prop="ele + '.text'">
<el-input type="textarea" v-model="item.content[ele].text">
</el-input>
</el-form-item>
<el-form-item label="正文文字颜色">
<el-input v-model="item.content[ele].textColor" disabled>
</el-input>
</el-form-item>
<el-form-item label="terms" :prop="ele + '.terms'">
<el-input type="textarea" v-model="item.content[ele].terms">
</el-input>
</el-form-item>
<el-form-item label="terms文字颜色">
<el-input v-model="item.content[ele].termsColor" disabled>
</el-input>
</el-form-item>
</div>
</div>
</el-form>
rules写法
language: [
{ required: true, message: '请至少选择一个语言', trigger: 'change' },
],
"zh.title": [
{ required: true, message: '请填写标题', trigger: 'change' }
],
"zh.text": [
{ required: true, message: '请填写正文', trigger: 'change' }
],
"zh.terms": [
{ required: true, message: '请填写terms', trigger: 'change' }
],
"en.title": [
{ required: true, message: '请填写标题', trigger: 'change' }
],
"en.text": [
{ required: true, message: '请填写正文', trigger: 'change' }
],
"en.terms": [
{ required: true, message: '请填写terms', trigger: 'change' }
],
"kr.title": [
{ required: true, message: '请填写标题', trigger: 'change' }
],
"kr.text": [
{ required: true, message: '请填写正文', trigger: 'change' }
],
"kr.terms": [
{ required: true, message: '请填写terms', trigger: 'change' }
],
总结
el-form-item通过:prop="ele + '.terms'"
其中ele为key值,terms为你v-model绑定的值
而rules里面通过"zh.terms"
来和prop来进行对应,这样就可以监听到而且可以和每个语言互不关联