element-ui監聽el-dialog關閉事件

        <el-dialog title="添加用戶" @close="handleClose" :visible.sync="dialogVisible" width="50%">

            <el-form :rules="editFormRuls" :model="yonhu" ref="editFormRef" label-width="100px">

                <el-form-item label="用戶ID" prop="roleId">

                    <!-- prop須要實現表單彈窗關閉的時候重置須要添加一個prop香input傳替數據，也就是後端接口內的數據 -->

                    <!-- 清除驗證重要的幾個參數 ref prop  :model v-model -->

                    <el-input v-model="yonhu.roleId"></el-input>

                </el-form-item>

                <el-form-item label="角色名稱" prop="roleName">

                    <el-input v-model="yonhu.roleName"></el-input>

                </el-form-item>

                <el-form-item label="角色描述" prop="roleDesc">

                    <el-input v-model="yonhu.roleDesc"></el-input>

                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">

                <el-button @click="dialogVisible = false">取 消</el-button>

                <el-button type="primary" @click="Adduser">確 定</el-button>

            </span>

        </el-dialog>

 

在el-dialog中添加一個屬性 @close="handleClose"，而後在到el-form 裏面添加editFormRuls進行表單的驗證，再綁定一個ref="editFormRef"，隨後在data中寫上editFormRuls的驗證規則

            editFormRuls:{

                roleId:[

                    {required:true,message:'請輸入用戶的ID',trigger:'blur'},

                    {min:3,max:10,message:'用戶名的ID在3到10字符之間'}

                ],

                roleName:[

                    {required:true,message:'請輸入用戶角色名稱',trigger:'blur'},

                    {min:3,max:10,message:'用戶名的長度在3到10字符之間'}

                // trigger失去焦點的時候驗證

                ],

                roleDesc:[

                    {required:true,message:'請輸入用戶角色描述',trigger:'blur'},

                    {min:3,max:10,message:'用戶名的長度在3到10字符之間'}

                // trigger失去焦點的時候驗證

                ]

            }

 

這裏驗證完成後在methods中寫入

        handleClose(){

            this.$refs.editFormRef.resetFields()

        },

而後在彈窗關閉後就能夠進行數據校驗和文本清空