element-plus獲取el-table中的行內容或行索引


網上搜到的內容或許適用於vue2或element,不適用vue3和element-plus,顯得有些過時了,讓我折騰了一個多小時,翻遍github的issue,終於找到了解決方法,特此記錄一下。

原始地址: https://github.com/element-plus/element-plus/issues/726

代碼如下:

            <el-table-column label="操作" width="200px">
                <template v-slot="scope">
                    <el-button @click="change(scope.row.ID)">修改</el-button>
                    <el-button type="danger" @click="del(scope.row.ID)">刪除</el-button>
                </template>
            </el-table-column>

在我的需求中,行內有兩個操作按鈕,一個修改,另一個刪除,都需要傳遞當前行內容中的ID字段。

方法是先將這兩個按鈕放在template標簽中,這是html5中一個默認不顯示的標簽,因為它設置了display:none屬性,將兩個按鈕放在這個標簽里面,視其為一組。

然后使用vue的v-slot指令,這個指令中是vue2.6新增的,取代了以前的slot和slot-scope,而我使用的是vue3,所以網上搜到的很多使用slot-scope的方法都失效了。

slot是vue中一個名叫插槽的概念,v-slot只能使用在template標簽上,標簽內的內容會綁定在此插槽中。

v-slot的值是自定義的名字,實測可以使用任何名字,並不是一定要叫"scope",只是網上的經驗大都叫"scope",scope是域的意思。

使用插槽名.row可以獲取一行的內容,如果要獲取行內的某一個字段的值,只需要再點出它的字段名,在我的代碼里,就是scope.row.ID

如果要獲取行的索引,使用插槽名.$index,注意$符號是必不可少的,否則將不起作用。

話說element-plus文檔不齊全真的好坑,又讓我掉了好幾根頭發,特此記錄下來,方便后來者查詢。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM