黑马程序员新版JavaWeb基础教程，（前端）用Vue实现同一对话框中，增加或修改（修改包含数据回显）的操作
整体代码
<!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" @click="deleteByIds" plain>批量删除</el-button>
<el-button type="primary" @click="addData" plain>新增</el-button>
<!-- 对话框-->
<el-dialog
title="titileMap[dialogTitle]"
:visible.sync="dialogVisible"
>
<span slot="footer" class="dialog-footer">
<!-- 新增表单-->
<el-form :model="brand" class="demo-brand">
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName"></el-input>
</el-form-item>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="brand.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="brand.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="brand.status"
active-color="#13ce66"
inactive-color="#ff4949"
:active-value="1"
:inactive-value="0"
></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit">提交</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</span>
</el-dialog>
</el-row>
<!-- 表格-->
<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"
align="center">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center"
>
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center"
>
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center"
>
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
<el-table-column
label="操作"
align="center">
<template slot-scope="scope">
<el-button type="primary" @click="updateData(scope.row)">修改</el-button>
<el-button type="danger" @click="deleteRow(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<!-- 分页-->
<div class="block">
<span class="demonstration">完整功能</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="5"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</div>
<script src="js/axios-0.18.0.js"></script>
<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",
mounted() {
//环境准备完后，默认的执行方法
this.selectAll()
},
//数据
data() {
return {
dialogVisible: false,
judge: false,
currentPage: 4,
//表单模型
brand: {
status: '',
companyName: '',
brandName: '',
ordered: '',
description: '',
id: '',
},
//选中的id数组
selectIds: [],
//表格模型
tableData: [],
//复选框
multipleSelection: [],
titleMap : {
addData : "添加数据",
updateData : "修改数据"
},
dialogTitle : "",
}
},
//方法
methods: {
addData(){
//初始化数据
this.brand = {};
this.dialogVisible = true;
this.dialogTitle = "addData";
},
updateData(row){
this.brand = row;
this.dialogVisible = true;
this.dialogTitle = "updateData";
},
submit(){
if (this.dialogTitle == "addData") {
console.log(this.brand);
var _this = this;
axios({
method: "post",
url: "http://localhost:8080/brand-case1/brand/add",
data: _this.brand
}).then(function (resp) {
if (resp.data == "success") {
//添加成功
//关闭窗口
_this.dialogVisible = false;
//添加成功提示
_this.success("添加");
}
})
} else {
console.log(this.brand);
var _this = this;
axios({
method: "post",
url: "http://localhost:8080/brand-case1/brand/update",
data: _this.brand
}).then(function (resp) {
if (resp.data == "success") {
//修改成功
_this.dialogVisible=false;
_this.selectAll();
_this.success("修改");
}
})
}
},
//成功提示
success(string) {
this.selectAll();
this.$message({
message: '恭喜你，' + string + '成功',
type: 'success'
});
},
//删除行
deleteRow(index, row) {
_this = this;
// console.log( index, row.id);
axios({
method: "post",
url: "http://localhost:8080/brand-case1/brand/deleteRow",
data: row.id
}).then(function (resp) {
if (resp.data == "success") {
_this.success("删除")
_this.selectAll()
}
})
},
//复选框悬选中后将选中的值赋值给multipleSelection
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(this.multipleSelection)
},
//批量删除
deleteByIds() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//对删除元素的id赋值
for (let i = 0; i < this.multipleSelection.length; i++) {
let selectElement = this.multipleSelection[i]; //一个复选框代表一个multipleSelection[i]
this.selectIds[i] = selectElement.id; //每个复选框的id存放到selectIds数组
}
var _this = this;
console.log("selectIds" + _this.selectIds)
//发送ajax请求
axios({
method: "post",
url: "http://localhost:8080/brand-case1/brand/deleteByIds",
data: _this.selectIds
}).then(function (resp) {
if (resp.data == "success") {
//重新加载查询数据
_this.selectAll();
//删除成功
_this.$message({
type: 'success',
message: '删除成功!'
});
}
_this.brand.status = '';
_this.brand.companyName = '';
_this.brand.brandName = '';
_this.brand.ordered = '';
_this.brand.description = '';
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 查询方法
onSubmit() {
console.log(this.brand);
},
//查
selectAll() {
//页面加载完成后获取异步请求，加载数据
var _this = this
axios({
method: "get",
url: "http://localhost:8080/brand-case1/brand/selectAll"
}).then(function (resp) {
_this.tableData = resp.data;
})
},
//表格隔行赋色
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
//每页多少条
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
//当前页
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
}
})
</script>
</body>
</html>
实现步骤
Wechat_Public_Account: 00后工作日记
看累了的话欢迎看看我的文章：00后工作日记
1.书写增加的请求转发
2.书写修改的请求转发
3.提交数据思路
参考链接：ElementUI 添加与修改使用同一个对话框的实现方式
3.1对话框更改部分
我理解(下图表达的意思)：titleMap[dialogTitle] ，titleMap[addData] 对应添加，titleMap[addData] 对应修改。
两个方法对应增加和修改按钮
3.2点击提交后用submi（对应提交按钮）进行提交。
3.3写好的请求转发放进去
注意事项
演示效果
点击修改
数据回显演示
Wechat_Public_Account: 00后工作日记
看累了的话欢迎看看我的文章：00后工作日记