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); }