当前位置:   article > 正文

Vue3——element-plus表格组件怎样得到当前行的id_vue3获取table表格当前行id

vue3获取table表格当前行id

实现方法:

  1. <el-table-column property="address" label="操作" show-overflow-tooltip header-align="center" v-slot="scope">
  2. <el-button type="success" @click="editBtn(scope.row.id)">编辑</el-button>
  3. <el-button type="danger">删除</el-button>
  4. </el-table-column>

使用 Vue v-slot 指令,这个指令中是 Vue 2.6 新增的,取代了以前的 slot 和 slot-scope,而我使用的是 Vue 3,所以网上搜到的很多使用 slot-scope 的方法都失效了。

使用 插槽名.row 可以获取一行的内容,如果要获取行内的某一个字段的值,只需要再点出它的字段名,在我的代码里,就是 scope.row.id

如果要获取行的索引,使用 插槽名.$index,注意 $ 符号是必不可少的,否则将不起作用。

剩下的就是直接在点击事件中获取参数使用即可。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/100945
推荐阅读
相关标签
  

闽ICP备14008679号