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>
export default {
	name: "dengmiQuery",
	comments: {
		DengmiModify
	},
	data() {
		return {
			modifyForm:{
				formLabelWidth:'120px',
				mimian:'',
				mimu:''
			},
			dengmiQueryForm: {
				dialogDeleteVisible:false,
				dialogVisible: false,
				list: []
			}
		};
	},
	methods: {
		submitForm(formName) {
			console.log(formName.mimu);
			this.$http.get('http://localhost:909/dengmi/showDengmi2').then(function (success) {
				console.log("This request is succeed! Here is the response:");
				this.dengmiQueryForm.list = success.body.result;
				this.dengmiQueryForm.requestResult = true;
			}, function (error) {
				console.log("This request is failed! Here is the response:");
				console.log(error);
				this.dengmiQueryForm.requestResult = false;
			})
		},
		handleEdit(row) {
			this.dengmiQueryForm.deleteShow = row.mimian + "(" + row.mimu + ")" + row.midi + "/" + row.zuozhe;
			this.modifyForm.mimian=row.mimian;
			this.modifyForm.mimu=row.mimu;
		}
	}
}
script>

如上代码，是在el-table标签上绑定了行单击事件*@row-click=“handleEdit”*，该方法的参数row即为当前行的数据。
在handleEdit方法中，通过对data中的参数赋值，然后新增窗口中通过使用data中的参数来获取当前行的数据，从而实现将当前行的数据传递到新的对话框中。

这个方法虽然也能实现需求，但是比较麻烦：当有别的操作的时候，比如我再添加一个删除操作，就需要在点击删除按钮的时候，获取当前行的数据，然后进行删除操作；而因为新增和删除使用的是不同的对话框，其取值也是要通过handleEdit方法来获取，因此，当按钮较多，或者当前行的字段值较多的时候，就需要在handleEdit中对许多许多的变量进行赋值，而且是对所有按钮的所有参数。这个工作量想想还是挺恐怖的。

1.2 使用slot-scope获取数据

slot-scope是属于VUE的东东，叫做插槽；至于插槽是个什么东东，来戳这里。
在操作列，对操作按钮先用带有slot-scope属性的dom进行包装，即可获取当前行的数据，具体的代码，除了操作列不同外，还需要删除el-table标签中绑定的*@row-click*方法，剩下的都一样：

<el-table-column label="操作尝试2">
	<template slot-scope="scope">
		<el-button type="text" @click="checkDetail(scope.row)">查看详情el-button>
	template>
el-table-column>
<script>
export default {
        name: "dengmiQuery",
        data() {
            return {
                modifyForm:{
                    formLabelWidth:'120px',
                    mimian:'',
                    mimu:''
                },
                dengmiQueryForm: {
                    dialogVisible: false,
                    list: [],
                }
            };
        },
        methods: {
            checkDetail(val){
                console.log(val)
            }

        }
    }
   script>

通过