vue结合elementui 含有表单的弹出框引入组件模式

最新推荐文章于 2024-07-17 16:02:53 发布

我的风格0.0

最新推荐文章于 2024-07-17 16:02:53 发布

阅读量2.4k

点赞数 1

分类专栏： elementui vue 文章标签： vue js java

本文链接：https://blog.csdn.net/qq_42199464/article/details/116265525

版权

vue 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

elementui

2 篇文章 0 订阅

订阅专栏

本文档展示了如何在Vue项目中利用ElementUI创建一个弹窗表单，用于新增数据。通过点击`新增`按钮，打开一个包含表单的弹窗，表单字段包括用户名和年龄。详细步骤包括在`index.vue`中定义按钮触发事件，导入并使用`detail.vue`组件，以及在`detail.vue`中定义表单验证规则。

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

首先建立 index.vue detail.vue 在一个目录
index.vue 初始页面，点击新增按钮，打开detail.vue表单

当然也可以直接参考elementui官网写，逻辑是一样的，只不过我把新增表单提出来了
官网参考地址：https://element.eleme.cn/#/zh-CN/component/dialog#events

index.vue主要代码

<el-button type="primary" @click="newModel">新增</el-button>

引入组件和使用
参考：https://www.cnblogs.com/e0yu/p/10795176.html

<script>
//导入组件
import detailInfo from './detail'
//使用组件
export default{
   components:{
      detailInfo
   },
   data(){
   return{
        detail:{
           title:'新增',
           showDetail:false,
           data:null
         },
         mounted(){
           this.init()
         },
         methods:{
          init(){
          .........
          },
          newModel(){
           this.detail.title =  '新增',
           this.detail.data={
           name:null,
           age:null
                //后面有哪些参数就添加那些 
           },
          this.detail.showDetail = true
          }


         }
     }
  }
}
</script>

添加对话框为弹窗

<el-dialog v-if="detail.showDetail" :visible.sync="detail.showDetail" width="50%" :title="detail.title">
<detail-info :detail-data="detail.data" @cancel="detail.showDetail = false" @success="() => {detail.showDetail = false,saveSuccess()}">

</el-dialog>

其中 v-if和:visible.sync 来判断是否显示
detail-info 使用组件
:detail-data 是detail.vue中传入并使用 index.vue中detail.data的模型

detail.vue的主要代码

<el-form ref="detailForm"  :inline="true" :model="detailData" :rules="datailRule" label-width="120px">
  <el-form-item prop="name" label="用户名">
    <el-input v-model="detailData.name" placeholder="请输入用户名"></el-input>
  </el-form-item>
  <el-form-item prop="age" label="年龄">
    <el-input v-model="detailData.age" placeholder="请输入年龄"></el-input>
  </el-form-item>
  后面按自己需求增加

  <div style="text-align:rigth;margin:10px 0 0 0">
     <el-button type="primary" @click="save">保存</el-button>
      <el-button type="primary" @click="cancel">取消</el-button>
  </div>
</el-form>

<script>
const detailRule={
    name:[{
       required:true,
       message:'请输入用户名',
       trigger:'blur'
    },{
       pattern:'',   //输入需要的正则表达式
       message:'用户名只能是中文等字符构成',
       trigger:'blur'
    }]
}


export default{
   props:{
     detailData:{
        type:Object,
        required:true
     }
   }
   data(){
    return{
     detailRule,
     ......
    }
   }
   

</script>