vue代码
<template>
<div>
<div style="margin: 20px"></div>
<el-button type="primary" @click="addBtn()">添加</el-button>
<div style="margin: 20px"></div>
<el-form :inline="true" :model="input" class="demo-form-inline">
<el-form-item label="学生姓名:">
<el-input v-model="input.name" placeholder="学生姓名:"></el-input>
</el-form-item>
<el-form-item label="学生年龄">
<el-input v-model="input.age" placeholder="学生年龄"></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" @click="inputSelect()">搜索</el-button>
</el-form-item>
</el-form>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="id"
label="id"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="名字"
width="180">
</el-table-column>
<el-table-column
prop="age"
label="年龄"
width="180">
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row.id)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row.id)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加 -->
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="学生姓名" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="学生年龄" :label-width="formLabelWidth">
<el-input v-model="form.age" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="formOk()">确 定</el-button>
</div>
</el-dialog>
<!--分页组件-->
<pagination
v-show="total>0"
:total="total"
:page.sync="input.pageNum"
:limit.sync="input.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import { listNotice,delNotice,addNotice,getNotice,updateNotice } from "@/api/student/student";
export default {
data() {
return {
tableData: [],
dialogFormVisible : false,
openStatus : false,
form : {},
input : {
pageNum: 1,
pageSize: 10,
},
formLabelWidth: '120px',
total : 0
}
},
created() {
this.getList();
},
methods: {
/** 查询公告列表 */
getList() {
listNotice(this.input).then(response => {
this.tableData = response.rows;
this.total = response.total;
});
},
/** 点击删除按钮 */
handleDelete(id){
this.$modal.confirm('是否确认删除学生编号为"' + id + '"的数据项?').then(function() {
return delNotice(id);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 点击确定按钮事件 */
formOk(){
if(this.openStatus){
updateNotice(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.dialogFormVisible = false;
this.getList();
});
}else {
addNotice(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.dialogFormVisible = false;
this.getList();
});
}
},
/** 点击添加事件 */
addBtn(){
this.openStatus = false;
this.form = {};
this.dialogFormVisible = true
},
/** 点击修改按钮 */
handleUpdate(id){
this.openStatus = true;
getNotice(id).then(response => {
this.form = response.data[0];
this.dialogFormVisible = true;
});
},
/** 点模糊查询搜索按钮 */
inputSelect(){
this.getList()
}
}
}
</script>
<style>
</style>
java controller
public class StudentController extends BaseController {
@Autowired
private StudentService studentService;
@GetMapping("list")
/**
* alt+回车找到对应的包
*/
public TableDataInfo list(Student student){
startPage();
List<Student> lst = studentService.list(student);
return getDataTable(lst);
}