Vue中使用element-ui給按鈕綁定一個(gè)單擊事件實(shí)現(xiàn)點(diǎn)擊按鈕就彈出dialog對(duì)話框
1.需求描述
想要實(shí)現(xiàn)點(diǎn)擊一個(gè)按鈕就彈出一個(gè)對(duì)話框,在對(duì)話框中可輸入數(shù)據(jù)進(jìn)行提交,在點(diǎn)擊取消時(shí)對(duì)話框關(guān)閉
2.功能實(shí)現(xiàn)
1.創(chuàng)建按鈕
在element中把找到按鈕的代碼放到div里
<el-row> <el-button type="primary" plain>新增</el-button> </el-row>
2.創(chuàng)建對(duì)話框
在element中找到dialog對(duì)話框?qū)?yīng)的代碼,把代碼粘貼到對(duì)應(yīng)的位置
3.對(duì)話框與按鈕的綁定
通過給按鈕添加與對(duì)話框相關(guān)聯(lián)的綁定事件,來實(shí)現(xiàn)點(diǎn)擊按鈕即可彈出對(duì)話框
把上圖第一行點(diǎn)擊打開中的
@click="dialogVisible = true"
放到按鈕組件代碼塊兒里,即創(chuàng)建按鈕的代碼變成:
<el-row> <el-button type="primary" plain @click="dialogVisible = true">新增</el-button> </el-row>
3.對(duì)話框表單的改造
對(duì)對(duì)話框里的內(nèi)容進(jìn)行修改,搞成我們想要的樣子
先把以下代碼段刪掉:
然后去element中找到對(duì)應(yīng)表單的代碼貼進(jìn)去,并對(duì)表單代碼中data()里的return方法進(jìn)行修改(改名、改成員變量),再對(duì)<el-form-item>的:model與v-model的名稱進(jìn)行修改(名稱要與剛剛修改的return里的那個(gè)方法一致)
4.點(diǎn)擊“立即創(chuàng)建”實(shí)現(xiàn)表單的提交與點(diǎn)擊取消對(duì)話框消失
對(duì)以下代碼進(jìn)行修改 :
修改成:
<el-form-item> <el-button type="primary" @click="addBrand">立即創(chuàng)建</el-button> <el-button @click="dialogVisible = false">取消</el-button> </el-form-item> <!--新增按鈕提交--> addBrand() { console.log(this.addForm); }
4.對(duì)“狀態(tài)”Switch開關(guān)所提交的類型進(jìn)行修改
在上述工作做完后,表單已經(jīng)能實(shí)現(xiàn)完整功能的表單的提交與取消后對(duì)話框消失的功能了,但此時(shí)Switch開關(guān)提交的類型為ture,若我不想要ture,我想要0或者1,就要對(duì)Switch“狀態(tài)”的代碼塊兒進(jìn)行修改
在element下Switch開關(guān)中找到擴(kuò)展的 value 類型,可以看到有active-value="100" 和inactive-value="0"的代碼,可以把這兩行代碼加入我們的Switch“狀態(tài)”的代碼塊兒中并對(duì)數(shù)值進(jìn)行修改
修改完之后,此時(shí)Switch“狀態(tài)”的代碼為:
<el-form-item label="狀態(tài)"> <el-switch v-model="addForm.status" active-value="1" inactive-value="0" ></el-switch> </el-form-item>
5.完整代碼
這樣我們就能實(shí)現(xiàn)實(shí)現(xiàn)點(diǎn)擊一個(gè)按鈕就彈出一個(gè)對(duì)話框,在對(duì)話框中可輸入數(shù)據(jù)進(jìn)行提交,在點(diǎn)擊取消時(shí)對(duì)話框關(guān)閉的功能啦
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .el-table .warning-row { background: oldlace; } .el-table .success-row { background: #f0f9eb; } </style> </head> <body> <div id="app"> <!--搜索表單--> <el-form :inline="true" :model="brand" class="demo-form-inline"> <el-form-item label="當(dāng)前狀態(tài)"> <el-select v-model="brand.status" placeholder="當(dāng)前狀態(tài)"> <el-option label="啟用" value="1"></el-option> <el-option label="禁用" value="0"></el-option> </el-select> </el-form-item> <el-form-item label="企業(yè)名稱"> <el-input v-model="brand.companyName" placeholder="企業(yè)名稱"></el-input> </el-form-item> <el-form-item label="品牌名稱"> <el-input v-model="brand.brandName" placeholder="品牌名稱"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">查詢</el-button> </el-form-item> </el-form> <!--第二行的按鈕--> <el-row> <el-button type="danger" plain>批量刪除</el-button> <el-button type="primary" plain @click="dialogVisible = true">新增</el-button> </el-row> <!--點(diǎn)擊新增按鈕就彈出對(duì)話框--> <el-dialog title="編輯品牌" :visible.sync="dialogVisible" width="30%" > <!--彈出的對(duì)話框的內(nèi)容--> <el-form ref="form" :model="addForm" label-width="80px"> <el-form-item label="品牌名稱"> <el-input v-model="addForm.brandName"></el-input> </el-form-item> <el-form-item label="企業(yè)名稱"> <el-input v-model="addForm.companyName"></el-input> </el-form-item> <el-form-item label="排序"> <el-input v-model="addForm.ordered"></el-input> </el-form-item> <el-form-item label="活動(dòng)形式"> <el-input type="textarea" v-model="addForm.description"></el-input> </el-form-item> <el-form-item label="狀態(tài)"> <el-switch v-model="addForm.status" active-value="1" inactive-value="0" ></el-switch> </el-form-item> <el-form-item> <el-button type="primary" @click="addBrand">立即創(chuàng)建</el-button> <el-button @click="dialogVisible = false">取消</el-button> </el-form-item> </el-form> </el-dialog> <!--表格--> <template> <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55"> </el-table-column> <el-table-column type="index" width="50"> </el-table-column> <el-table-column prop="brandName" align="center" label="品牌名稱" > </el-table-column> <el-table-column prop="companyName" align="center" label="企業(yè)姓名" > </el-table-column> <el-table-column prop="ordered" align="center" label="排序"> </el-table-column> <el-table-column prop="status" align="center" label="當(dāng)前狀態(tài)"> </el-table-column> <el-table-column align="center" label="操作"> <el-row> <el-button type="primary">修改</el-button> <el-button type="danger">刪除</el-button> </el-row> </el-table-column> </el-table> </template> </div> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script> new Vue({ el: "#app", methods: { tableRowClassName({row, rowIndex}) { if (rowIndex === 1) { return 'warning-row'; } else if (rowIndex === 3) { return 'success-row'; } return ''; }, //復(fù)選框選中后執(zhí)行的方法 handleSelectionChange(val) { this.multipleSelection = val; console.log(this.multipleSelection) }, <!--查詢按鈕提交--> onSubmit() { console.log(this.brand); }, <!--新增按鈕提交--> addBrand() { console.log(this.addForm); } }, data() { return { <!--彈出的對(duì)話框的內(nèi)容--> addForm: { brandName:'', companyName:'', id:'', ordered:'', description:'', status:'', }, dialogVisible: false, multipleSelection: [], tableData: [{ brandName: '小米', companyName: '小米科技有限公司', ordered: '100', status:'1', }, { brandName: '小米', companyName: '小米科技有限公司', ordered: '100', status:'1', }, { brandName: '小米', companyName: '小米科技有限公司', ordered: '100', status:'1', }, { brandName: '小米', companyName: '小米科技有限公司', ordered: '100', status:'1', }], <!--搜索表單--> brand: { status: '', companyName: '', brandName: '', } } } }) </script> </body> </html>
總結(jié)
到此這篇關(guān)于Vue中使用element-ui給按鈕綁定一個(gè)單擊事件實(shí)現(xiàn)點(diǎn)擊按鈕就彈出dialog對(duì)話框的文章就介紹到這了,更多相關(guān)Vue element-ui點(diǎn)擊按鈕彈出dialog內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vite5+vue3+?import.meta.glob動(dòng)態(tài)導(dǎo)入vue組件圖文教程
import.meta.glob是Vite提供的一個(gè)特殊功能,它允許你在模塊范圍內(nèi)動(dòng)態(tài)地導(dǎo)入多個(gè)模塊,這篇文章主要給大家介紹了關(guān)于vite5+vue3+?import.meta.glob動(dòng)態(tài)導(dǎo)入vue組件的相關(guān)資料,需要的朋友可以參考下2024-07-07Vue2.0學(xué)習(xí)之詳解Vue 組件及父子組件通信
本篇文章主要介紹了Vue2.0學(xué)習(xí)之詳解Vue 組件及父子組件通信,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12解決vue打包 npm run build-test突然不動(dòng)了的問題
這篇文章主要介紹了解決vue打包 npm run build-test突然不動(dòng)了的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11使用Vue-Awesome-Swiper實(shí)現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果
這篇文章主要介紹了用Vue-Awesome-Swiper實(shí)現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值需要的朋友可以參考下2019-08-08解決Vue不能檢測(cè)數(shù)組或?qū)ο笞儎?dòng)的問題
下面小編就為大家分享一篇解決Vue不能檢測(cè)數(shù)組或?qū)ο笞儎?dòng)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02