需求是这样的，有多项tab，切换不同的tab，显示的输入框是一样的，但有的tab需要必填，有的tab则不需要必填。效果图如下：（带星号和不带星号）
<el-tabs v-model="activeName" @tab-click="handleTabsClick">
<el-tab-pane
v-for="item in 6"
:key="item"
:label="item"
:name="item"
style="width: 150px"
></el-tab-pane>
</el-tab>
<el-form ref="addGoodsForm" label-width="86px" :rules="rules" :model="addGoodsForm" class="addGoodsForm" :inline="true">
<el-form-item v-if="activeName == '5'" label="品牌" prop="brandNorules">
<!-- 其他：不需要校验品牌 -->
<el-input v-model="addGoodsForm.brandNorules" placeholder="请输入" maxlength="30" show-word-limit autocomplete="off" size="small"></el-input>
</el-form-item>
<el-form-item v-else label="品牌" prop="brand">
<el-input v-model="addGoodsForm.brand" placeholder="请输入" maxlength="30" show-word-limit autocomplete="off" size="small"></el-input>
</el-form-item>
<el-form-item label="用途" prop="useType" :rules="[{ required: activeName == '5' ? false : true, message: '请选择用途', trigger: 'change'}]">
<el-select v-model="addGoodsForm.useType" placeholder="请选择" size="small">
<el-option v-for="item in dictArr.BATTERY_PURPOSE" :key="item.value" :label="item.name" :value="item.name" />
</el-select>
</el-form-item>
</el-form>
data() {
const checkBrandRules = (rule, value, callback) => {
if (!value || value === '' || !this.addGoodsForm.brandNorules) {
callback()
} else if (!this.checks.text.norText.test(value)) {
callback(new Error('品牌只能输入：中英文数字'))
}
return callback()
}
const checkBrand = (rule, value, callback) => {
if (value === '' || !this.addGoodsForm.brand) {
return callback(new Error('请输入品牌'))
} else {
this.addGoodsForm.brand = this.addGoodsForm.brand.trim()
if (this.addGoodsForm.brand.length < 1) {
return callback(new Error('品牌最少需要输入1个字符'))
} else if (!this.checks.text.norText.test(value)) {
callback(new Error('品牌只能输入：中英文数字'))
}
return callback()
}
}
return {
rules: {
brandNorules: [{ required: false, validator: checkBrandRules, trigger: 'blur' }], // 品牌
brand: [{ required: true, validator: checkBrand, trigger: 'blur' }], // 品牌
}
}
}