107 lines
3.0 KiB
Vue
107 lines
3.0 KiB
Vue
<template>
|
||
<div class="box">
|
||
<el-table :data="tableData" style="width: 100%">
|
||
<el-table-column prop="num_key" label="ID" width="180">
|
||
</el-table-column>
|
||
<el-table-column prop="user" label="用户名" width="180">
|
||
</el-table-column>
|
||
<el-table-column width="180" prop="pwd" label="密码">
|
||
</el-table-column>
|
||
<el-table-column label="操作">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" @click="del(scope.row.num_key)"
|
||
>删除</el-button
|
||
>
|
||
<el-button size="mini" @click="up(scope.row.num_key,scope.$index)"
|
||
>修改</el-button
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-dialog
|
||
title="提示"
|
||
:visible.sync="dialogVisible"
|
||
width="30%"
|
||
>
|
||
|
||
<div>
|
||
<p>用户名：</p>
|
||
<el-input v-model="user" placeholder="请输入用户名"></el-input>
|
||
</div>
|
||
<div>
|
||
<p>密码：</p>
|
||
<el-input
|
||
v-model="pwd"
|
||
show-password
|
||
placeholder="请输入密码"
|
||
></el-input>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="set"
|
||
>确 定</el-button
|
||
>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<style scoped>
|
||
.box{
|
||
width: 100%;
|
||
}
|
||
</style>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
tableData: [],
|
||
dialogVisible: false,
|
||
user:"",
|
||
pwd:"",
|
||
id:""
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getlist();
|
||
},
|
||
methods: {
|
||
del(id) {
|
||
this.axios
|
||
.get("/deluser", {
|
||
params: {
|
||
id,
|
||
},
|
||
})
|
||
.then((res) => {
|
||
console.log(res.data);
|
||
this.getlist();
|
||
});
|
||
},
|
||
getlist() {
|
||
this.axios.get("/getlist").then((res) => {
|
||
console.log(res.data);
|
||
this.tableData = res.data.data;
|
||
});
|
||
},
|
||
up(id,index){
|
||
this.dialogVisible = true
|
||
this.id = id
|
||
this.pwd = this.tableData[index].pwd
|
||
this.user = this.tableData[index].user
|
||
|
||
},
|
||
set(){
|
||
this.axios.post("/update",{
|
||
user: this.user,
|
||
pwd: this.pwd,
|
||
id: this.id
|
||
}).then((res)=>{
|
||
console.log(res.data)
|
||
this.getlist()
|
||
this.dialogVisible = false
|
||
|
||
})
|
||
}
|
||
},
|
||
};
|
||
</script> |