学习目标
使用vue + elementui动态删除表格内当前行数据
具体步骤
第一步:拿到当前行数据的索引
第二部:绑定函数置删除键将拿到的数据索引通过请求发送给后端
第三部,调用获取数据借口(这样就不用删除数据后还要再次刷新页面,用户体验会更好)
实现方法
首先获取将要被删除行的数据索引
<el-card class="box-card">
<el-table
:data="tableData"
border
stripe
style="width: 100% "
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column prop="id" label="学号" align="center"></el-table-column>
<el-table-column prop="name" label="姓名" align="center"></el-table-column>
<el-table-column prop="sex" label="性别" align="center"></el-table-column>
<el-table-column prop="college" label="学院" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope" class="active">
<el-button @click="editData(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
<el-button @click="removeData(scope.row.id)" type="danger" icon="el-icon-delete" circle></el-button>
</template>
</el-table-column>
</el-table>
<el-row :gutter="20">
<el-col :span="6" :offset="12">
<div class="block">
<el-pagination
background
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="pageSize"
layout="total, prev, next, jumper, pager"
:total="total"
></el-pagination>
</div>
</el-col>
</el-row>
</el-card>
在这一步中,获取当行数据使用的方法是 scope.row.id 。这将把当行数据的id传递给删除函数
接下来就是删除函数的逻辑实现了
在这一步中需要注意的是,请求成功后应该调用一次获取数据列表的函数,否则需要刷行页面才康德到删除的效果
removeData(id) {
//提示框,判断用户是否操作失误
this.$confirm("此操作将永久删除此学生, 是否继续?", "警告", {
confirmButtonText: "继续",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
const data = { id }; //这里<=>data = {id:id}
axios
.post("URL", data)
.then(response => {
this.fetchdata(); //删除数据后重新获取数据
})
.catch(() => {
this.$message({
type:"warning",
message:"请求失败,请检查网络设置"
})
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除"
});
});
}