1. Requirements description
If you want to click a button, a dialog box will pop up, you can enter data in the dialog box to submit, and the dialog box will close when you click Cancel
2. Function realization
1. Create a button
Put the code to find the button in the div in the element
<el-row>
<el-button type="primary" plain>新增</el-button>
</el-row>2. Create dialog
Find the code corresponding to the dialog box in the element, and paste the code to the corresponding position
3. Binding of dialog boxes and buttons
By adding a binding event associated with the dialog box to the button, the dialog box can pop up when the button is clicked
Click on the first line in the above picture to open
@click="dialogVisible = true"Put it in the code block of the button component, that is, the code to create the button becomes:
<el-row>
<el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
</el-row>3. Modification of dialog form
Modify the content in the dialog box to make it what we want
First delete the following code segment:
Then go to the element to find the code of the corresponding form and paste it in, and modify the return method in the data() in the form code (rename, change the member variable), and then modify the :model and v-model of <el-form-item> Modify the name (the name should be consistent with the method in the return just modified)
4. Click "Create Now" to submit the form and click Cancel to disappear the dialog box
Modify the following code:
changed to:
<el-form-item>
<el-button type="primary" @click="addBrand">立即创建</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
<!--新增按钮提交-->
addBrand() {
console.log(this.addForm);
}4. Modify the type submitted by the "Status" Switch switch
After the above work is done, the form can already realize the function of submitting and canceling the fully functional form, and the dialog box disappears. But at this time, the type of submission of the Switch switch is ture. If I don’t want ture, I want 0 or 1. , it is necessary to modify the code block of the Switch "state"
Find the extended value type in the Switch switch under the element, you can see the code with active-value="100" and inactive-value="0", you can add these two lines of code to our Switch "state" code block child and modify the value
After the modification, the code of the Switch "state" at this time is:
<el-form-item label="状态">
<el-switch v-model="addForm.status"
active-value="1"
inactive-value="0"
></el-switch>
</el-form-item>5. Complete code
In this way, we can realize the function of clicking a button and popping up a dialog box. In the dialog box, data can be entered for submission, and the dialog box is closed when cancel is clicked.
<!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="当前状态">
<el-select v-model="brand.status" placeholder="当前状态">
<el-option label="启用" value="1"></el-option>
<el-option label="禁用" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName" placeholder="企业名称"></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>
<!--点击新增按钮就弹出对话框-->
<el-dialog
title="编辑品牌"
:visible.sync="dialogVisible"
width="30%"
>
<!--弹出的对话框的内容-->
<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="企业名称">
<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="活动形式">
<el-input type="textarea" v-model="addForm.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<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">立即创建</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="企业姓名"
>
</el-table-column>
<el-table-column
prop="ordered"
align="center"
label="排序">
</el-table-column>
<el-table-column
prop="status"
align="center"
label="当前状态">
</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 '';
},
//复选框选中后执行的方法
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(this.multipleSelection)
},
<!--查询按钮提交-->
onSubmit() {
console.log(this.brand);
},
<!--新增按钮提交-->
addBrand() {
console.log(this.addForm);
}
},
data() {
return {
<!--弹出的对话框的内容-->
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>