el-dialog 加强版

最新推荐文章于 2025-04-15 10:36:21 发布

C语言国粹

最新推荐文章于 2025-04-15 10:36:21 发布

阅读量281

点赞数

分类专栏： vue-element-admin 文章标签： vue.js javascript html5

本文链接：https://blog.youkuaiyun.com/m0_53612276/article/details/120044759

版权

vue-element-admin 专栏收录该内容

5 篇文章

订阅专栏

这篇博客介绍了加强版的El-Dialog组件，它在Vue.js环境下提供更便捷的表单操作方式。通过prop属性定义数据存储位置，label定义表单标签，rules设置验证规则。组件支持原生Element UI组件或自定义template。关键事件包括open、submit、close和done，分别用于对话框开启、数据提交、关闭及停止加载状态。form对象包含提交的数据，而refs则提供对对话框内组件的引用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

github地址

提供了更方便的方式来操作表单类型的el-dialog。

作者写的说明文档在github上就可以看到, 在readme里面

这里主要写一些自己觉得比较关键的几个点

该组件的页面主要是靠item组织起来的, 每个item中有个prop属性, 这个prop属性就是表示该item数据存储在哪个属性上, 如: prop="name" 那么数据就可以在 form.name 拿到

label是表单中的标签

rules可以为该item设定验证规则

component 可以设定string 或者一个对象

如果是原生的 element ui 组件的话可以直接写在对象里, 如果要使用更加复杂一些的组件的话, 可以使用template, 然后传递字符串给component,

比如下面一个例子

<template>
	<div>
    <el-button @click="open">打开表单</el-button>
    <form-dialog ref="formDialog">
      <template #slot-type="{ scope }">
        <el-radio-group v-model="scope.type">
          <el-radio :label="0">目录</el-radio>
          <el-radio :label="1">菜单</el-radio>
          <el-radio :label="2">权限</el-radio>
        </el-radio-group>
      </template>
  </form-dialog>
  </div>
</template>

<script>
export default {
  name: 'xxx',
  methods: {
    open() {
      this.$refs.formDialog.open({
        title: '表单标题',
        on: {
          open: (form, { showLoading, hideLoading, $refs, close, rebind }) => {
            // 表单打开时open事件处理
          },
          submit: (form, { close, done, $refs }) => {
            // 点击确定按钮时且表单校验通过的submit事件处理
          }
        },
        // 需要渲染的表单项
        items: [
          {
            label: '菜单类型',
            prop: 'type',
            value: 0,
            rules: {
              required: true,
              message: '请选择菜单类型',
              trigger: 'blur'
            },
            component: 'slot-type'
          },
          {
            label: '名称',
            prop: 'name',
            value: '',
            span: 12,
            rules: {
              required: true,
              trigger: 'blur',
              message: '请输入角色名称'
            },
            component: {
              name: 'el-input',
              attrs: {
                placeholder: '请输入角色名称'
              }
            }
          },
        ]
      })
    }
  }
}
</script>

其中第一个item就是用的template

比较常用的两个事件是

open 和 submit

handleOpen(form, { showLoading, hideLoading, $refs, close, rebind })

showLoading 可以用于显示对话框的载入状态
hideLoading 是用于隐藏载入转圈
close 用于初始化异常关闭对话框

form 可以在初始化的时候填充数据



handleSubmit(form, { close, done, $refs })

close 可以用于数据提交完毕之后关闭对话框

done 用于停止按钮的载入状态

form为当前表单的数据, 主要就是拿这里面的数据提交请求

refs 是对话框中的组件的引用, 如果有设置的话