不废话上思路
外部el-table-column是基础table模板,里面template slot-scope 的主要作用就是获取table一行的数据信息;
其次要加一个对话框,在对话框里输入数值然后提交就可以传入后台就行数据交互。
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.row)"
>编辑</el-button
>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>删除</el-button
>
</template>
</el-table-column>
对话框的代码:
<el-dialog title="修改" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="姓名" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="级别" :label-width="formLabelWidth">
<el-select v-model="form.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">
<!-- 点击按钮提交数据后,dialogFormVisible变false -->
<!-- dialogSubmit提交事件 -->
<!-- dialogCancel是取消事件 -->
<el-button @click="dialogCancel()">取 消</el-button>
<el-button @click="dialogSubmit()" type="primary">确 定</el-button>
</div>
</el-dialog>
在按钮"编辑"上绑定点击事件,事件中传入scope.row,代表着把每一行的数据信息传入进去; 之后在事件中获取出数据。
//这是""编辑"方法
handleEdit(row) {
// index是指计算机的索引,row代表实际table数据的编号
console.log(row.id);
this.form.id = row.id;
//是dialog表单是否可视默认值,默认为false,当handleEdit被点击变为true,
this.dialogFormVisible = true;
},
获取数据,并且把值传给事先定义好的数据空间里,然后给对话框里的按钮绑定事件,分别有取消和确定。对话框默认是隐藏状态,当点击编辑按钮时,则会显示在页面上。然后点击确定或取消即可消失。 那么如何实现这个功能呢?
首先在对话框里设置一个事件,默认对话框是隐藏的; 如下图
:visible.sync='dialogFormVisible' 其中:visible.sync .sync是什么意思呢,指的就是同步动态双向的来表示visible的值. 把dialogFormVisible放入data地址中,点击编辑框按钮时,dialogFormVisible = true,点击确定按钮 dialogFormVisible = false;
按钮的绑定事件:
<!-- 点击按钮提交数据后,dialogFormVisible变false -->
<!-- dialogSubmit提交事件 -->
<!-- dialogCancel是取消事件 -->
<el-button @click="dialogCancel()">取 消</el-button>
<el-button @click="dialogSubmit()" type="primary">确 定</el-button>
当以上逻辑实现完成时,给确定按钮绑定一个事件,调用之前定义好数据空间作为axios中的值,与后台进行交互;
dialogSubmit() {
console.log(this.form.id);
//axios提交事件
axios({
// 请求方式
method: "GET",
// 请求地址
url: `http://localhost:8087/admin/dialog/submit`,
// URL中的查询参数
//GET需要params参数;
params: {
id: this.form.id,
name: this.form.name,
level: this.form.level,
},
})
.then((result) => {
if (result.data != null) {
this.$message.success("更改成功");
} else {
this.$message.error("更改失败");
}
// 点击submit后,加载数据后无论成功与否,都会消失!
})
.catch((err) => {
console.log(err);
this.$message.error("网络连接有问题");
});
this.dialogFormVisible = false;
this.selectNone();
},
标签:vue,管理系统,dialogFormVisible,对话框,点击,按钮,id,row From: https://www.cnblogs.com/ZhuAo/p/16905258.html