[前端]在特定条件下隐藏表单项|vue

Question

1、我想要实现这样一种效果：下面是一个表单，在【工单类型】为投诉、举报时，事发区域和事发地点两个表单项才会出现，也就是说选择其他工单类型时，这两个表单项都是隐藏的。

2、这是相关代码段，使用的前端框架是Vue。

<d-form labelSuffix=":" :model="dForm10Datas" :rules="dForm10Rules" ref="dForm10Ref" >
                <el-row class="d-pl-48 d-mt-10" ref="dGrid6Ref" >
                    <el-col :span="12" >
                        <d-form-item label="工单类型" prop="workType" ref="dFormItem45Ref" >
                            <d-select width="80%" v-model="dForm10Datas.workType" :enumList="dSelect5EnumList" ref="dSelect5Ref" ></d-select>
                        </d-form-item>
                    </el-col>
                    <el-col :span="12" >
                        <d-form-item label="是否公开" prop="isPublic" ref="dFormItem46Ref" >
                            <d-radio :border="false" :enumList="dRadio7EnumList" ref="dRadio7Ref" ></d-radio>
                        </d-form-item>
                    </el-col>
                    <el-col :span="22" >
                        <d-form-item label="诉求标题" prop="appealTitle" ref="dFormItem47Ref" >
                            <d-input class="DInput50-style" v-model="dForm10Datas.appealTitle" ref="dInput50Ref" ></d-input>
                        </d-form-item>
                    </el-col>
                    <el-col :span="12" >
                        <d-form-item label="紧急程度" prop="sla" ref="dFormItem48Ref" >
                            <d-radio :border="false" :enumList="dRadio8EnumList" ref="dRadio8Ref" ></d-radio>
                        </d-form-item>
                    </el-col>
                    <el-col :span="22" >
                        <d-form-item label="诉求详情" prop="communityDemands" ref="dFormItem49Ref" >
                            <d-input class="DInput52-style" type="textarea" v-model="dForm10Datas.communityDemands" ref="dInput52Ref" ></d-input>
                        </d-form-item>
                    </el-col>
                    <el-col :span="13" >
                        <d-form-item label="附件资料" ref="dFormItem50Ref" >
                            <d-upload btnText="选择文件" ref="dUpload2Ref" ></d-upload>
                        </d-form-item>
                    </el-col>
                    <el-col :span="12" >
                        <d-form-item label="来电时间" ref="dFormItem51Ref" >
                            <d-date-picker :showCurDate="true" width="80%" ref="dDatePicker3Ref" ></d-date-picker>
                        </d-form-item>
                    </el-col>
                    <el-col :span="11" >
                        <d-form-item label="事发区域" ref="dFormItem54Ref" >
                            <d-input width="80%" ref="dInput57Ref" ></d-input>
                        </d-form-item>
                    </el-col>
                    <el-col :span="22" >
                        <d-form-item label="事发地点" ref="dFormItem57Ref" >
                            <d-input placeholder="示例：横琴镇XX路XX号XX室" width="80%" ref="dInput58Ref" ></d-input>
                        </d-form-item>
                    </el-col>
                    <el-col :span="12" >
                        <d-form-item label="登记人" ref="dFormItem53Ref" >
                            <d-input width="80%" :readonly="true" v-model="dForm10Datas.regUsr" ref="dInput56Ref" ></d-input>
                        </d-form-item>
                    </el-col>
                    <el-col :span="12" >
                        <d-form-item label="登记时间" ref="dFormItem52Ref" >
                            <d-date-picker :showCurDate="true" :readonly="true" ref="dDatePicker4Ref" ></d-date-picker>
                        </d-form-item>
                    </el-col>
                </el-row>
            </d-form>

3、想请教一下解决思路~

Answer 1

template加条件

<template v-if="dForm10Datas.workType === 1">
  <el-col :span="11" >
                        <d-form-item label="事发区域" ref="dFormItem54Ref" >
                            <d-input width="80%" ref="dInput57Ref" ></d-input>
                        </d-form-item>
                    </el-col>
                    <el-col :span="22" >
                        <d-form-item label="事发地点" ref="dFormItem57Ref" >
                            <d-input placeholder="示例：横琴镇XX路XX号XX室" width="80%" ref="dInput58Ref" ></d-input>
                        </d-form-item>
                    </el-col>
</template>