先上代码:
<el-table-column width="300" label="操作">
<template slot-scope="scope">
<el-button
class="btn"
size="mini"
@click="handleEdit(scope.$index, scope.row)"
>修改</el-button
>
<el-button
class="btn"
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
先看修改代码如何操作:
<el-dialog title="修改用户信息" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="姓名" label-width="120px">
<!-- autocomplete="off" 关闭自动提示 -->
<el-input v-model="user.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="等级" label-width="120px">
<el-select v-model="user.level" placeholder="请选择等级">
<el-option label="首席讲师" value="1"></el-option>
<el-option label="高级讲师" value="2"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="submit()">确 定</el-button>
</div>
</el-dialog>
methods: {
handleEdit(index, row) {
//index指索引也就是0,1,2,3的计算机顺序,而row是指我们表单的实际编号
this.dialogFormVisible = true;
//user是data中的数据数组,把row赋值给user 也就是把row赋值给user中的编号
this.user = row;
console.log(index, row);
},
// 提交用户信息 与对话框的确认按钮所绑定,触发确定按钮也就触发了方法;
submit() {
console.log(this.user.id, this.user.name, this.user.level);
axios({
// 请求方式
method: "GET",
// 请求地址
url: `http://localhost:8087/UpdateContorller`,
// URL中的查询参数
//GET需要params参数;
params: {
//参数与对话框设定的数值绑定
id: this.user.id,
name: this.user.name,
level: this.user.level,
},
}).then((result) => {
console.log(result.data);
if (result.data != null) {
this.$message.success("修改成功");
this.dialogFormVisible = false;
this.select();
}
});
},
再看删除按钮如何操作:
<el-dialog title="修改用户信息" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="姓名" label-width="120px">
<!-- autocomplete="off" 关闭自动提示 -->
<el-input v-model="user.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="等级" label-width="120px">
<el-select v-model="user.level" placeholder="请选择等级">
<el-option label="首席讲师" value="1"></el-option>
<el-option label="高级讲师" value="2"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="submit()">确 定</el-button>
</div>
</el-dialog>
methods: {
//删除代码
handleDelete(index, row) {
console.log(index);
//当删除按钮被点击时,直接执行axios后台操作即可,不过参数id要和row绑定,因为绑定后删除根据用户点击的编号自动更改参数ID
axios
.delete("http://localhost:8087/DeleteFromId", {
params: {
id: row.id,
},
})
.then((res) => {
console.log(res);
if (res.data != null) {
this.$message.success("删除成功");
this.select();
}
});
},
};
原文地址:http://www.cnblogs.com/ZhuAo/p/16887853.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性