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** ,注意 `` 符号是必不可少的,否则将不起作用。

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

相关推荐
m0_748254663 分钟前
Vue.js 模板语法基础
前端·vue.js·flutter
donecoding6 分钟前
AI时代程序员的护城河:让AI做创意组合,用标准化工具守住质量底线
javascript·架构·代码规范
明月_清风15 分钟前
Async/Await:让异步像同步一样简单
前端·javascript
倔强的钧仔17 分钟前
拒绝废话!前端开发中最常用的 10 个 ES6 特性(附极简代码)
前端·javascript·面试
喔烨鸭19 分钟前
vue3中使用原生表格展示数据
前端·javascript·vue.js
软件开发技术深度爱好者22 分钟前
JavaScript的p5.js库坐标系图解
开发语言·前端·javascript
如果你好31 分钟前
JavaScript 对象属性遍历Object.entries Object.keys:6 种常用方法详解与对比
javascript
胖鱼罐头33 分钟前
JavaScript 数据类型完全指南
前端·javascript
发现一只大呆瓜34 分钟前
JS-深度起底JS类型判断:typeof、instanceof 与 toString
javascript
萌狼蓝天36 分钟前
[Vue]Tab关闭后,再次使用这个组件时,上次填写的内容依旧显示(路由复用导致组件实例未被销毁)
前端·javascript·vue.js·前端框架·ecmascript