前言：
? ? 在開(kāi)發(fā)時(shí)我們有是會(huì)涉及到對(duì)表的操作解寝，例如我們想點(diǎn)擊操作按鈕后將該行數(shù)據(jù)后獲取該行中的某個(gè)數(shù)據(jù)并以該數(shù)據(jù)為參數(shù)進(jìn)行下一步參數(shù)暇昂。這時(shí)怎樣才能獲取我們按鈕這一行對(duì)應(yīng)列中的數(shù)據(jù)呢？以下提供兩種思路。
一走敌、使用 row-click獲取當(dāng)前行數(shù)據(jù)
? ? 直接在el-table標(biāo)簽上綁定一個(gè)方法@row-click=“handleEdit”惯豆。用以實(shí)現(xiàn)點(diǎn)擊這一行數(shù)據(jù)時(shí)可以獲取本行數(shù)據(jù)內(nèi)容。
?<el-table????:data="tableData"????style="width:?100%"????max-height="670"? @row-click="handle" ?>
//表頭屬性內(nèi)加入 @row-click="handleEdit"即可跪解。
在method中定義
getDetails?(row)?{??
? ? ? ?console.log(row)
//此時(shí)就能拿到整行的信息? },??
//想獲取行內(nèi)元素的信息只需要在row后面加入相應(yīng)列名即可炉旷。
二、使用 slot-scope獲取數(shù)據(jù)
slot-scope是屬于VUE的東西叉讥，叫做插槽至于插槽是什么請(qǐng)看鏈接
? ? 在操作列窘行，對(duì)操作按鈕先用帶有slot-scope屬性的dom進(jìn)行包裝，即可獲取當(dāng)前行的數(shù)據(jù)图仓，具體的代碼罐盔，除了操作列不同外，還需要?jiǎng)h除el-table標(biāo)簽中綁定的*@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="時(shí)間"
??????width="120"
????>
????</el-table-column>
????<el-table-column
??????prop="province"
??????label="預(yù)警類型"
??????width="90"
????>
????</el-table-column>
????<el-table-column
??????prop="city"
??????label="可信度"
??????width="90"
????>
????</el-table-column>
????<el-table-column
??????prop="address"
??????label="坐標(biāo)"
??????width="250"
????>
????</el-table-column>
????<el-table-column
??????prop="zip"
??????label="相對(duì)位置"
??????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)//?此時(shí)就能拿到整行的信息
????//?},
????deleteRow?(index,?rows)?{
??????rows.splice(index,?1)
????},
????detailMessage?(row)?{
??????let?self?=?this
??????self.$router.push({
????????path:?'/handlepicture',
????????query:?{
??????????picID:?row.date
????????}
??????})
????}
??},
以這樣的方式就可以獲取到每一行行內(nèi)的所有內(nèi)容了惶看。
