前言：
在开发时我们有是会涉及到对表的操作，例如我们想点击操作按钮后将该行数据后获取该行中的某个数据并以该数据为参数进行下一步参数。这时怎样才能获取我们按钮这一行对应列中的数据呢？以下提供两种思路。
一、使用 row-click获取当前行数据
直接在el-table标签上绑定一个方法@row-click=“handleEdit”。用以实现点击这一行数据时可以获取本行数据内容。
<el-table :data="tableData" style="width: 100%" max-height="670" @row-click="handle" >
//表头属性内加入 @row-click="handleEdit"即可。
在method中定义
getDetails (row) {
console.log(row)
//此时就能拿到整行的信息 },
//想获取行内元素的信息只需要在row后面加入相应列名即可。
二、使用 slot-scope获取数据
slot-scope是属于VUE的东西，叫做插槽至于插槽是什么请看链接
在操作列，对操作按钮先用带有slot-scope属性的dom进行包装，即可获取当前行的数据，具体的代码，除了操作列不同外，还需要删除el-table标签中绑定的*@row-click*方法，剩下的都一样：
<el-table
:data="tableData"
style="width: 100%"
max-height="670"
>
<el-table-column
fixed
prop="date"
label="ID"
width="110"
>
</el-table-column>
<el-table-column
prop="name"
label="时间"
width="120"
>
</el-table-column>
<el-table-column
prop="province"
label="预警类型"
width="90"
>
</el-table-column>
<el-table-column
prop="city"
label="可信度"
width="90"
>
</el-table-column>
<el-table-column
prop="address"
label="坐标"
width="250"
>
</el-table-column>
<el-table-column
prop="zip"
label="相对位置"
width="90"
>
</el-table-column>
<el-table-column
prop="guandao_distance"
label="管道距"
width="90"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120"
>
<template slot-scope="scope">
<el-button
@click.native.prevent="detailMessage (scope.row)"
type="text"
size="small"
>
操作
</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
methods: {
// getDetails (row) {
// console.log(row.date)// 此时就能拿到整行的信息
// },
deleteRow (index, rows) {
rows.splice(index, 1)
},
detailMessage (row) {
let self = this
self.$router.push({
path: '/handlepicture',
query: {
picID: row.date
}
})
}
},
以这样的方式就可以获取到每一行行内的所有内容了。
