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

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

实现方法:

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

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

目录
相关文章
|
8天前
|
资源调度 JavaScript 前端开发
vite+vue3+ts从0到1搭建企业级项目(2)
vite+vue3+ts从0到1搭建企业级项目
24 1
|
1天前
|
JSON 移动开发 JavaScript
Vue03基础语法(样式绑定、事件处理器、表单、自定义指令、vue组件、组件通信【自定义事件】)
Vue03基础语法(样式绑定、事件处理器、表单、自定义指令、vue组件、组件通信【自定义事件】)
7 0
|
8天前
|
开发工具 git
vite+vue3+ts从0到1搭建企业级项目(4)
vite+vue3+ts从0到1搭建企业级项目
25 0
|
8天前
|
存储 JavaScript API
vite+vue3+ts从0到1搭建企业级项目(3)
vite+vue3+ts从0到1搭建企业级项目
20 0
|
8天前
|
资源调度 JavaScript 测试技术
vite+vue3+ts从0到1搭建企业级项目(1)
vite+vue3+ts从0到1搭建企业级项目
36 0
|
5天前
|
前端开发 JavaScript
Vue底层实现原理总结
Vue底层实现原理总结
|
1天前
|
JavaScript
Vue全局注册与局部注册异同点
Vue全局注册与局部注册异同点
12 6
|
1天前
|
JavaScript
Vue的小知识点
Vue的小知识点
7 2
|
7天前
|
JavaScript