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.完整代碼文章來源：http://www.zghlxwxcb.cn/news/detail-800934.html
這樣我們就能實(shí)現(xiàn)實(shí)現(xiàn)點(diǎn)擊一個(gè)按鈕就彈出一個(gè)對(duì)話框，在對(duì)話框中可輸入數(shù)據(jù)進(jìn)行提交，在點(diǎn)擊取消時(shí)對(duì)話框關(guān)閉的功能啦文章來源地址http://www.zghlxwxcb.cn/news/detail-800934.html
<!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>到了這里，關(guān)于Vue中使用element-ui 給按鈕綁定一個(gè)單擊事件，實(shí)現(xiàn)點(diǎn)擊按鈕就彈出一個(gè)dialog對(duì)話框的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
