在vue中編寫使用者列表的查詢和刪除功能
阿新 • • 發佈:2021-12-12
查詢、刪除程式碼如下;
<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>