element-plus获取el-table中的行内容或行索引

网上搜到的内容或许适用于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文档不齐全真的好坑，又让我掉了好几根头发，特此记录下来，方便后来者查询。