Vue从零开始开发管理系统（学习笔记第十节）

一、添加用户的方法编写

接口：users

方法：post

参数：username
        password
        email
        mobile

async addUser(){
    this.$refs.Ref.vaildate(async (vaild)=>{
        if(!vaild) return
        const{data:res}=async this.$http.post('users',this.Form)
        if(res.meta.status!==200) return this.$message.error(res.meta.msg)
        this.$message.success(res.meta.msg)
        this.getUser()
        this.isVisible=false
    })

二、修改用户功能

1.显示一个编辑用户的dialog

<el-dialog title="编辑" :visible.sync="isVisible " width="40%">
<span>
//编辑用户的表单
</span>
<span slot="footer">
    <el-button @click="isVisible = false">取 消</el-button>
    <el-button type="primary" @click="update()">确 定</el-button>
</span>
</el-dialog>

2.获取该行数据

<el-table-column label="操作" width="180px">
    <template slot-scope="scope">
        <el-tooltip effect="dark" content="修改" placement="top" :enterable="false">
            <el-button type="primary" icon="el-icon-edit" size="mini" click="editUser(scope.row)">
        </el-tooltip>
    </>
</>




<el-dialog title="编辑" :visible.sync="isVisible " width="40%">
<span>
    <el-form :model="editForm" ref="editRef" label-width="100px" :rules="editRul">
        <el-form-item><el-input v-model="editForm.username" :disabled="true"></el-input></>
        <el-form-item><el-input v-model="editForm.email"></el-input></>
        <el-form-item><el-input v-model="editForm.mobile"></el-input></>
    <el-form>
</span>
<span slot="footer">
    <el-button @click="isVisible = false">取 消</el-button>
    <el-button type="primary" @click="update()">确 定</el-button>
</span>
</el-dialog>


methods:{
    async editUser(info){
    const{data:res}=await this.$http.get('users/'+info.id)
    this.editForm=res.data
    this.isVisibleState=true
    }
}

更新

update(){
            this.$refs.editRef.validate(async(vaild)=>{
                if(!vaild) return
                const{data:res}=await this.$http.put('users/'+this.editForm.id,{email:this.editForm.email,mobile:this.editForm.mobile})
                if(res.meta.status!==200) return this.$message.error(res.meta.msg)
                this.$message.success(res.meta.msg)
                this.getUserList()
                this.isVisibleState=false

---