web前端-Vue动态显示隐藏表单el-form-item

最新推荐文章于 2024-08-23 17:12:15 发布

asdfadafd

最新推荐文章于 2024-08-23 17:12:15 发布

阅读量5.2k

点赞数 5

分类专栏：前端 html 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/asdfadafd/article/details/123304704

版权

前端同时被 2 个专栏收录

47 篇文章 6 订阅

订阅专栏

html

47 篇文章 0 订阅

订阅专栏

给每项表单项添加一个自己的id名，并用v-model绑定相对应的数据，利用v-if根据上一个表单项的数据值来进行显示或隐藏

        <!-- 类别展示隐藏 -->
        <el-form-item id="classShowOrHide" v-model="showClass" v-if="showClass==true" label="类别类型" prop="classType">
             <el-select v-model="form.classType" clearable style="width:380px" placeholder="请选择">
                 <el-option
                     v-for="dict in classList"
                     :key="dict.dictValue"
                     :label="dict.dictLabel"
                     :value="dict.dictValue"
                 ></el-option>
             </el-select>
        </el-form-item>

定义是否展示表单的变量；根据v-model绑定是否展示隐藏

export default {
  name: "Class",
  components: {
  },
  data() {
    return {
      // 类别是否展示
      showClass: true,
   }
},


methods: {
    //显示类别
    openClass() {
        //是否展示班次类型；开班展示，结束隐藏
        this.showClass = true;
    }
}