查询、删除代码如下;
<template> <div class="login-box"> <el-table :data="tableData" border> <el-table-column align="center" label="id" width="140"> <template v-slot="scope"> {{scope.row.id}} </template> </el-table-column> <el-table-column align="center" label="姓名" width="140"> <template v-slot="scope"> {{scope.row.uname}} </template> </el-table-column> <el-table-column align="center" label="密码" width="140"> <template v-slot="scope"> {{scope.row.pwd}} </template> </el-table-column> <el-table-column align="center" label="邮箱" width="140"> <template v-slot="scope"> {{scope.row.email}} </template> </el-table-column> <el-table-column align="center" label="电话号码" width="140"> <template v-slot="scope"> {{scope.row.phone}} </template> </el-table-column> <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width"> <template v-slot="scope"> <el-button type="primary" size="mini"> 编辑 </el-button> <el-button type="mini" size="danger" @click="deluser(scope.row.id)"> 删除 </el-button> </template> </el-table-column> </el-table> </div> </template> <script> export default { name: "user-lists", data(){ return{ tableData:[] } }, created(){ this.fetchData() }, methods:{ fetchData(){ var vm=this; this.$axios({ method:'get', url:'http://localhost:8080/user/selectUserList' }).then(function (resp) { vm.tableData=resp.data; }); }, deluser(id){ var vm=this; this.$axios({ method:'GET', url:'http://localhost:8080/user/deleteUser?id='+id }).then(function (resp) { /* vm.tableData=resp.data*/ console.log(resp.data); if(resp.data=="success"){ vm.$message({ message:'删除成功', type:'success' }); /* vm.$router.push("/UserLists")*/ vm.fetchData();//更新数据 } }).catch(function (error) { vm.$message.error('错了'); }); } } } </script> <style scoped> </style>