vxe-table.vue示例
<template>
<div>
<template #default="{ row }">
<vxe-button type="text" icon="el-icon-edit" @click="editEvent(row)"></vxe-button>
//removeEvent(row)传递行号
<vxe-button type="text" icon="el-icon-delete" @click="removeEvent(row)"></vxe-button>
</template>
</div>
</template>
<script>
export default {
data() {
return {
submitLoading: false,
//tableData数据源
tableData: [{...}],
...
methods: {
removeEvent(row) {
//elementUI 二次确认弹窗
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
//获取下标
var index = this.tableData.findIndex((tableData) => tableData.id == row.id);
this.tableData.splice(index, 1);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
</script>
<style>
...
</style>