＜el-form＞根据条件动态控制表单必填项

需求：若开启动态标签，则标签文案、背景颜色、文字额色都为必填项；若关闭动态标签，则标签文案、背景颜色、文字额色都不显示

代码实现：

<el-form ref="form" :model="form" :rules="rules" size="small" label-width="140px">
    <el-form-item label="动态标签" prop="tipStatus">
		<el-radio-group v-model="form.tipStatus" @change="tipChange">
			<el-radio :label="1">开启</el-radio>
			<el-radio :label="0" style="width: 200px;">关闭</el-radio>
		</el-radio-group>
	</el-form-item>
	<el-form-item label="标签文案" prop="tipContent_id" v-show="form.tipStatus == 1" :rules="form.tipStatus == 1 ? rules.tipContent_id: [{required: false}]">
		<el-select v-model="form.tipContent_id">
			<el-option v-for="item in dict.navigation_superscript" :key="item.id" :label="item.label" :value="item.value"/>
        </el-select>
	</el-form-item>
	<el-form-item label="标签背景颜色" prop="bgColor" v-show="form.tipStatus == 1" :rules="form.tipStatus == 1 ? rules.bgColor: [{required: false}]">
		<el-color-picker v-model="form.bgColor"></el-color-picker>
	</el-form-item>
	<el-form-item label="标签文字颜色" prop="textColor" v-show="form.tipStatus == 1" :rules="form.tipStatus == 1 ? rules.textColor: [{required: false}]">
        <el-color-picker v-model="form.textColor"></el-color-picker>
	</el-form-item>
</el-form>

export default {
    dicts: ["navigation_superscript"],
    data() {
        return {
            form: {
                tipStatus:0,
				tipContent_id:'',
				tipContent:'',
				bgColor:'#FF0000',
				textColor:'#FFFFFF',
            }
        }
    },
    rules: {
        tipContent_id: [{
			required: true, 
			trigger: 'change',
			message: '请选择标签文案！',
		}],
		bgColor: [{
			required: true,
			trigger: 'change',
			message: '请选择标签背景颜色！',
		}],	
		textColor: [{
			required: true,
			trigger: 'change',
			message: '请选择标签文字颜色！',
		}],
    }
}