要獲取Element UI中el-table中每一行的index并將其傳遞給方法,可以使用el-table中提供的row-index屬性:
- 通過在el-table組件上綁定@row-click事件,獲取所點擊的行的index:
<el-table @row-click="handleRowClick">
</el-table>
...
methods: {
handleRowClick(row, event, column) {
const rowIndex = event.target.parentNode.rowIndex - 1;
...
}
}
-
請注意,在處理handleRowClick方法時,我們需要計算出所點擊的行在el-table數(shù)據(jù)數(shù)組中的位置,這里使用了event.target.parentNode.rowIndex-1來獲取其索引值。文章來源:http://www.zghlxwxcb.cn/news/detail-687790.html
-
使用element-ui中的slot-scope屬性,將每一行的索引傳遞給自定義列組件中的方法文章來源地址http://www.zghlxwxcb.cn/news/detail-687790.html
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleClick(scope.$index)">點擊</el-button>
</template>
</el-table-column>
...
methods: {
handleClick(rowIndex) {
...
}
}
- 在上述代碼中,使用了Vue的slot-scope特性,將每一行的數(shù)據(jù)scope以及
$index
(表示當(dāng)前行的索引)傳遞給了自定義列組件中的模板。這里我們直接將$index
作為方法參數(shù)傳入即可得到所點擊的行的索引。
到了這里,關(guān)于vue 獲取elementUI中的el-table里每一行的index并傳到方法中的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!