hello你好我是辰兮很高興能來閱讀，本篇整理一下Vue+elementUI的彈出框相關用法，留給自己，也分享給初學者，一起進步！
Vue+elementUI表格組件使用請參考：Vue+elementUI表格組件使用
本篇是Vue+elementUI的彈框使用案例前端代碼決議
因為開始寫Vue專案很容易遇到彈出例外彈出，前期老是有的彈出無法正常關閉，
后來了解后就是一個Vue中子傳父，父傳子的問題
首先了解彈出框的顯示 :visible.sync這個
在主頁面匯入相關要彈出的彈窗，并系結相關的值和方法(根據自己的需要)
<template>
<el-container style="margin: 0px">
...........................
<system-add :dialogFormVisibleAdd="dialogFormVisibleAdd" :addForm="addForm" @addDialogClose="addDialogClose" @refresh="refresh"></system-add>
<!--編輯彈出框-->
<system-edit :dialog-form-visible-edit="dialogFormVisibleEdit" :editForm="editForm" @refresh="refresh" @editDialogClose="editDialogClose"></system-edit>
<!-- 版本升級-->
<system-up-version ref="upVersion" :dialogFormVisibleUpdate="dialogFormVisibleUpdate" :up-version="upVersion" @upDialogClose="upDialogClose" @refresh="refresh"></system-up-version>
<!--系統洗掉-->
<SystemDelete :dialogDelete="dialogDelete" :sSysCode="sSysCode" @deleteDialogClose="deleteDialogClose" @refresh="refresh"></SystemDelete>
</el-container>
</template>
主頁面一定要匯入這些彈框組件 檢查清楚，然后將彈出狀態設定為false
方法當我們點擊相關按鈕的時候我們要將彈出框的顯示狀態設定為true，這樣彈出框即可彈出
1.如添加按鈕 彈出框設定為true
2.如編輯按鈕要將這一行要編輯的資料帶出
所以要 this.editForm = Object.assign({}, row); 將這一行的資料賦值給某一個物件,其實row本身就代表這一行的物件參考如下3
3.移除按鈕 要傳某一個code 所以將這一行物件的code賦值給系結在這個彈框上的資料 等等…
row.sSysCode就代表當前行物件的某一個屬性，你要什么屬性就自己點出來
父傳子，用props組件接受 如下接受來自父組件的dialogFormVisibleAdd引數，如上我們點擊添加按鈕后將這個引數設定為了true，所以彈框父組件傳來true彈框動態系結，顯示為true 彈框打開
子傳父this.$emit(‘addDialogClose’);
父組件上面系結了這個方法 就會自動呼叫執行這個方法 首先添加了頁面會自動重繪一下最新的串列 然后將彈出框的狀態設定為關閉 這樣一個完整的流程就做好了
<system-add :dialogFormVisibleAdd="dialogFormVisibleAdd" :addForm="addForm" @addDialogClose="addDialogClose" @refresh="refresh"></system-add>
//自己定義的一個重繪頁面的方法
refresh() {
this.getSystemList();
}
像增刪改這樣的操作頁面是肯定要實作同步重繪的，簡單的做一個呼叫方法即可實作，
總結：關于Vue+elementUI專案彈出框就是組件的使用，參考組件就是父傳子，子傳父等問題，好好練習和反思大家一起進步！
The best investment is to invest in yourself.
2020.09.17 愿你們奔赴在自己的熱愛里！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/80186.html
標籤：其他