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

最新推荐文章于 2024-12-20 09:20:31 发布

原创最新推荐文章于 2024-12-20 09:20:31 发布 · 5.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

前端同时被 2 个专栏收录

47 篇文章

订阅专栏

html

47 篇文章

订阅专栏

本文介绍如何在Vue组件中使用v-model绑定数据并结合v-if控制，实现表单项的动态展示。通过实例展示了如何根据上一表单项的值来决定类别选择框的显示或隐藏。

给每项表单项添加一个自己的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;
    }
}