el-dialog 加强版

最新推荐文章于 2024-07-21 01:43:08 发布

C语言国粹

最新推荐文章于 2024-07-21 01:43:08 发布

阅读量240

点赞数

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

本文链接：https://blog.csdn.net/m0_53612276/article/details/120044759

版权

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

摘要由CSDN通过智能技术生成

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">