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

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

相关推荐

  1. Vue3 + TS + Element-Plus 封装 Table 表格组件

    2024-01-08 21:10:02       23 阅读
  2. #vu3# element plus表格序号字段

    2024-01-08 21:10:02       52 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-08 21:10:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-08 21:10:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-01-08 21:10:02       82 阅读
  4. Python语言-面向对象

    2024-01-08 21:10:02       91 阅读

热门阅读

  1. 「HDLBits题解」Vector3

    2024-01-08 21:10:02       62 阅读
  2. Hive实战处理(二十三)hive整合phoenix

    2024-01-08 21:10:02       51 阅读
  3. 深入理解 Golang 中的值类型和引用类型

    2024-01-08 21:10:02       68 阅读
  4. 什么是CHATGPT

    2024-01-08 21:10:02       54 阅读
  5. 【Istio】安装Istio1.20.1

    2024-01-08 21:10:02       63 阅读
  6. Trino:分区表上的SQL提交 & 查询流程浅析

    2024-01-08 21:10:02       53 阅读
  7. HarmonyOS@Extend装饰器:定义扩展组件样式

    2024-01-08 21:10:02       57 阅读
  8. DDD领域驱动设计(六)

    2024-01-08 21:10:02       64 阅读
  9. JDBC-常用API

    2024-01-08 21:10:02       66 阅读
  10. 笨蛋学设计模式创建者模式-单例模式【2】

    2024-01-08 21:10:02       51 阅读
  11. Django5+DRF入门教程

    2024-01-08 21:10:02       57 阅读
  12. 2024校招,网易互娱游戏测试工程师一面

    2024-01-08 21:10:02       61 阅读
  13. Vagrant Centos 7 环境配置

    2024-01-08 21:10:02       62 阅读