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

实现方法:

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

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

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

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

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

相关推荐
老前端的功夫1 分钟前
首屏优化深度解析:从加载性能到用户体验的全面优化
前端·javascript·vue.js·架构·前端框架·ux
晴殇i17 分钟前
性能飞跃!这几个现代浏览器API让页面加载速度提升至90+
前端·javascript·面试
Hilaku20 分钟前
检测开发者工具是否打开?这几种方法让黑客无处遁形🤣
前端·javascript·前端框架
GIS开发特训营23 分钟前
2025年华中农业大学暑期实训优秀作品(4):智慧煤仓监控系统平台——重塑煤炭仓储管理新模式
前端·vue.js·信息可视化
Cherry的跨界思维33 分钟前
5、Python长图拼接终极指南:Pillow/OpenCV/ImageMagick三方案
javascript·python·opencv·webpack·django·pillow·pygame
向阳是我39 分钟前
v0.app的next.js项目自动部署到宝塔服务器教程
服务器·开发语言·javascript·github·ai编程
重铸码农荣光42 分钟前
深入理解 JavaScript 继承:从原型链到 call/apply 的灵活运用
前端·javascript·面试
禅思院42 分钟前
vite项目hmr热更新问题
前端·vue.js·架构
前端老宋Running1 小时前
告别“祖传”defineProperty!Vue 3 靠 Proxy 练就了什么“神功”?
前端·vue.js·面试
码途进化论1 小时前
前端Docker多平台构建自动化实践
前端·javascript·后端