網上搜到的內容或許適用於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文檔不齊全真的好坑,又讓我掉了好幾根頭發,特此記錄下來,方便后來者查詢。
