<template>
<div>
<el-table :data="tableData">
<el-table-column prop="id" label="id" width="40"></el-table-column>
<el-table-column prop="username" label="姓名" width="120"></el-table-column>
<el-table-column prop="password" label="密码" width="100"></el-table-column>
<el-table-column prop="truename" label="昵称" width="120"></el-table-column>
<el-table-column label="操作"><el-button>编辑用户</el-button></el-table-column>
</el-table>
<el-button @click="dialogVisible = true">添加用户</el-button>
<el-dialog
title="添加新用户"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<el-form :model="form">
<el-form-item label="用户名" :label-width="formLabelWidth">
<el-input v-model="form.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" :label-width="formLabelWidth">
<el-input v-model="form.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="昵称" :label-width="formLabelWidth">
<el-input v-model="form.trueName" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="createUser">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import axios from 'axios'
export default {
name:"testTable",
data(){
return {
tableData:{},
dialogVisible: false,
form: {
username: '',
password: '',
trueName: ''
},
formLabelWidth: '120px'
}
},
methods:{
getData(){
axios.get('http://localhost:3000/testmysql').then(v=>{
this.tableData = v.data
})
},
createUser(){
if(this.form.username === '' || this.form.password === '')
{
alert("请输入用户名或密码");
}else{
axios.post('http://localhost:3000/register',{
username:this.form.username,
password:this.form.password,
trueName:this.form.trueName
}).then((v)=>{
console.log(v);
window.location.reload();
this.dialogVisible = false
}).catch();
}
},
handleClose(done) {
this.$confirm('确认关闭?')
.then(() => {
done();
})
.catch(() => {});
}
},
computed:{
testComputed : function(){
return this.tableData;
}
},
mounted(){
this.getData();
}
}
</script>
<style scoped>
</style>
加入了一个dialog,基本的用户添加是能实现了。
遗留了一个问题,通过ajax添加数据后是应该刷新页面还是将值插入到页面中呢?希望得到大侠的指点,感激感激