ElementUI表格中获取当前行数据（实现对table数据的修改和删除）

前言

在此之前，已经实现了vue+ElementUI的跨域查询并渲染查询结果的功能，现在想要在每一行中添加修改和删除的按钮。于是乎就需要获取当前行的数据，于是就有了下面两种方式的获取。

1 获取当前行的数据

1.1 我的笨办法

这里是我记录自己的学习过程，这个方法也能实现，但是麻烦，如果您只是为了寻找最终方案，请直接查看1.2章节。
首先我查看了官方文档，打算使用对话框来渲染修改页面和删除警告页面。这个实现起来很简单，就是对按钮绑定一个click事件，然后控制对话框的显示和隐藏：

<el-table @row-click="handleEdit" :data="dengmiQueryForm.list" stripe border width="100%" height="350">
	<el-table-column prop="mimian" label="谜面" width="300" fixed="left">
	</el-table-column>
	<el-table-column prop="dengmiSeq" label="序号">
	</el-table-column>
	<el-table-column prop="mimu" label="谜目">
	</el-table-column>
	<el-table-column prop="mige" label="谜格">
	</el-table-column>
	<el-table-column prop="midi" label="谜底">
	</el-table-column>
	<el-table-column prop="zuozhe" label="作者">
	</el-table-column>
	<el-table-column prop="mizhu" label="注">
	</el-table-column>
	<el-table-column prop="shangxi" label="赏析">
	</el-table-column>
	<el-table-column prop="leixing" label="类型">
	</el-table-column>
	<el-table-column label="操作" fixed="right" width="200px">
		<el-col :span="10">
			<el-tooltip effect="dark" content="编辑当前行" placement="top">
				 <el-button size="mini" @click="dengmiQueryForm.dialogVisible = true">编辑</el-button>
			</el-tooltip>
		</el-col>
	</el-table-column>
</el-table>
<div style="margin-top: 5px;"></div><!--这个只是为了在页面上显示间隔-->
<el-dialog title="编辑灯谜" :visible.sync="dengmiQueryForm.dialogVisible">
	<el-form :model="modifyForm">
		<el-form-item label="谜面" :label-width="modifyForm.formLabelWidth">
			<el-input v-model="modifyForm.mimian" auto-complete="off"></el-input>
		</el-form-item>
		<el-form-item label="谜目" :label-width="modifyForm.formLabelWidth">
			<el-input v-model="modifyForm.mimu" auto-complete="off"></el-input>
		</el-form-item>
	</el-form>
	<div slot="footer" class="dialog-footer">
		<el-button @click="dengmiQueryForm.dialogVisible = false">取 消</el-button>
		<el-button type="primary" @click="dengmiQueryForm.dialogVisible = false">确 定</el-button>
	</div>
</el-dialog>

<script>