vue+Element,编辑模态框

废话不多说，直接上代码

<el-button size="mini" @click="editgsForm(scope.row)">编辑</el-button>

<el-dialog :title="title" :visible.sync="dialogEditgsVisible"  @close="closeDialogVisible">

<el-form  :model="editForm" :rules="rules" ref="editForm" >
<el-form-item label="类别名称" :label-width="formLabelWidth">
<el-input v-model="editForm.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="排序" :label-width="formLabelWidth">
<el-input  v-model.number="editForm.sort" ></el-input>
</el-form-item>
</el-form>

<div slot="footer" class="dialog-footer">
<el-button @click="dialogEditgsVisible = false">取 消</el-button>
<el-button type="primary" @click="saveEditForm('editForm')">更 新</el-button>
</div>
</el-dialog>

别忘了data 中的设置：
方法里：

/**
*点击编辑按钮，弹出编辑模态框
* @param
*/
editgsForm(val){
this.dialogEditgsVisible = true;
this.title="编辑分类"this.editForm.id=val.id;
this.editForm.name=val.name;
this.editForm.sort=val.sort;
},`
/**
*更新编辑数据
* @param
*/
saveEditForm(aaa){
this.$refs[aaa].validate( (valid) => {
console.log(this.$refs[aaa])
if(valid){
this.axios.put(`http://localhost:3000/admin/categories/${this.editForm.id}`,this.editForm).then( res =>{
alert('更新成功');
this.dialogEditgsVisible = false;
this.init()
})
}
})
},