JavaWeb——Vue组件库Element（3/6）：常见组件：Dialog对话框、Form表单（介绍、使用、实际效果）

qiyi.sky2024-10-06 16:21

目录

Dialog对话框

介绍

使用

实际效果

Form表单

介绍

使用

实际效果

Dialog对话框

介绍

  • Dialog对话框：在保留当前页面状态的情况下，告知用户并承载相关操作。

Dialog 对话框组件可以在保留当前页面信息的状态下弹出一个对话框，并在对话框中呈现信息给用户，比如可以呈现表格、form 表单、图片或文字，最终呈现的效果如下。

使用

接下来演示对话框组件的使用：

直接打开 Element 的官方网站，在左侧菜单栏找到 Dialog 对话框组件，有各种对话框，比如基本用法，点击打开 Dialog 会弹出提示信息，也可在对话框中自定义内容，比如生成表格或表单，还可制作嵌套的 Dialog。演示第二个自定义内容的对话框，点击显示代码，直接复制相关代码。复制过来后，这里需要两个数据模型，一个是 Dialog tableVisible 数据模型，点击按钮后将其设置为 true，另一个是表格中展示内容的 data 数据模型。

html 复制代码 
<template>
  <div>
    <!--  Dialog 对话框 -->

    <el-button type="text" @click="dialogTableVisible = true"
      >打开嵌套表格的 Dialog</el-button
    >

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column
          property="date"
          label="日期"
          width="150"
        ></el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="200"
        ></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>
    <br /><br />
    <el-button type="text" @click="dialogFormVisible = true"
      >打开嵌套表单的 Dialog</el-button
    >

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
};
</script>
<style></style>

在代码中通过 dialogFormVisible 变量控制对话框的显示与隐藏，变量值为 true 则显示，为 false 则隐藏。

实际效果

接下来讲解本章最后一个组件------form 表单组件。表单用于采集数据，表单组件由输入框、选择器、时间组件、单选框、多选框等表单项组成，在前端开发中应用较多，比如添加课程和修改课程时点击按钮弹出的对话框中就是 form 表单组件。

Form表单

介绍

  • Form表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。

使用

这里演示典型表单，点击显示代码复制到 VS Code 中修改。要实现点击按钮呈现表单的效果，我们在 Dialog 中呈现 form 表单。

html 复制代码 
<template>
  <div>
    <!-- Form -->
    <el-button type="text" @click="dialogFormVisible = true"
      >打开嵌套表单的 Dialog</el-button
    >
    
    <el-dialog title="Form表单" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.date1"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker
              placeholder="选择时间"
              v-model="form.date2"
              style="width: 100%"
            ></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="即时配送">
          <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源">
          <el-radio-group v-model="form.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    onSubmit() {
      alert("submit!");
    },
  },
};
</script>
<style></style>

在 form 表单中还有最后一个表单项即两个按钮，点击提交按钮触发 onsubmit 方法，在 message 属性中添加 onsubmit 方法，在函数中通过 alert 弹出表单数据，需获取当前 Vue 对象中的 form，将 form 对象转为字符串，改造后打开浏览器查看效果，输入内容点击提交，能接收到表单数据，可将其提交到服务端。

实际效果

到此，关于 Element 中常见的组件就介绍完了，对于这些组件的学习，基本上是 Ctrl+C 复制、Ctrl+V 粘贴的过程，粘贴后改造成想要的样子，若组件中有属性不清楚，直接打开官方文档，每个组件的属性和事件在最后都有详细说明。

END

学习自：黑马程序员------JavaWeb课程

相关推荐
电商API大数据接口开发Cris14 分钟前
Java Spring Boot 集成淘宝 SDK：实现稳定可靠的商品信息查询服务
前端·数据挖掘·api
pepedd86415 分钟前
LangChain：大模型开发框架的全方位解析与实践
前端·llm·trae
HANK22 分钟前
KLineChart 绘制教程
前端·vue.js
Jerry33 分钟前
Compose 利用工具加快开发速度
前端
前端小张同学44 分钟前
前端行情好起来了，但是我依然没拿到offer
前端
程序员小续1 小时前
React 官方严令禁止：Hook 不能写在 if/else，真相竟然是…
前端·javascript·程序员
懒得不想起名字1 小时前
flutter_riverpod: ^2.6.1 应用笔记
前端
CrabXin1 小时前
让网页在 PC 缩放时“纹丝不动”的 4 个技巧
前端·react.js
Juchecar1 小时前
Naive UI 学习指南 - Vue3 初学者完全教程
前端·vue.js
用户8168694747251 小时前
从0到1教你开发一个Mini-ESLint
前端·开源
热门推荐
01UV安装并设置国内源02DeepSeek更新！速览DeepSeek V3.1新特性03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code04KGG转MP3工具|非KGM文件|解密音频05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）07Spring 调试终于不再痛苦了08Claude Code VSCode集成开发指南：AI编程助手完整配置092025最新国内服务器可用docker源仓库地址大全（2025年8月更新）10【大模型实战篇】部署GPT-OSS-120B踩得坑（vllm / ollama等推理框架）