Vue实战-根据id删除对应行

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>