网上搜到的内容或许适用于vue2或element,不适用vue3和element-plus,显得有些过时了,让我折腾了一个多小时,翻遍github的issue,终于找到了解决方法,特此记录一下。
代码如下:
<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文档不齐全真的好坑,又让我掉了好几根头发,特此记录下来,方便后来者查询。