Element中的el-table中如何获取每一行的id

这篇具有很好参考价值的文章主要介绍了Element中的el-table中如何获取每一行的id。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

只需要用<template slot-scope="scope"></template >标签包裹起来即可

使用scope.row.列名,的方式获取当前行对应列的值

 可以通过使用作用域插槽的方式获取每一行的id。以下是一个示例代码:

<el-table-column prop="status" label="状态">
  <template slot-scope="scope">
    <el-switch v-model="scope.row.status"
               active-color="green"
               inactive-color="#ff4949"
               active-value="1"
               active-text="未删除"
               inactive-text="已删除"
               inactive-value="0"
               width="50"
               @change="deleteGoods(scope.row.id, scope.row.status)">
    </el-switch>
  </template>
</el-table-column>

以下是一个示例代码: 文章来源地址https://www.toymoban.com/news/detail-817778.html

<el-table :data="tableData">
  <el-table-column prop="id" label="ID">
    <template slot-scope="scope">
      {{ scope.row.id }}
    </template>
  </el-table-column>
  <!-- 其他列 -->
</el-table>

到了这里,关于Element中的el-table中如何获取每一行的id的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-ui中的el-table合并单元格

    在写项目的时候有时候会经常遇到把行和列合并起来的情况,因为有些数据是重复渲染的,不合并行列会使表格看起来非常的混乱,如下:  而我们想要的数据是下面这种情况,将重复的行进行合并,使表格看起来简单明了,如下:   1:html部分 所谓的合并行就是将多行相同

    2024年02月10日
    浏览(43)
  • 修改element-ui中的表格el-table的滚动条样式

    一.单独修改element-ui中的表格el-table的滚动条样式(两种方法) 1. 2.  二.保持整个页面的滚动条的风格是一致(直接改全局的滚动条样式) 三.页面内某一组件滚动条样式美化  scroll-bar是需要滚动条组件的元素,类名自定义

    2024年02月11日
    浏览(60)
  • element-ui中的el-table实现分页多选功能

    selection-change事件:当选择项发生变化时会触发该事件(当分页切换时,选中的数据都会自动清空) 链接: https://blog.csdn.net/qq_36157085/article/details/122922678

    2024年02月17日
    浏览(48)
  • el-table点击表格某一行添加到URL参数,访问带参URL加载表格内容并滚动到选中行位置 [Vue3] [Element-plus 2.3]

    需求 :有个表格列出了一些行数据,每个行数据点击后会加载出对应的详细数据,想要在点击了某一行后,能够将该点击反应到URL中,这样我复制这个URL发给其他人,他们打开时也能看到同样的行数据。 url会根据点击动态更新,大概是这样 xxx.com?param1=var1param2=var2 主要版本

    2024年02月14日
    浏览(63)
  • element-ui el-table 如何实现合并单元格

    el-table的组件的可以合并单元格,先定义参数span-method 方法objectSpanMethod。在方法内控制当前单元格渲染成几个单元格或者删除掉当前单元格。 比如:代码中定义:span-method=\\\"objectSpanMethod\\\" objectSpanMethod实现是在方法区,具体内容是根据变量rowSpanList 去决定当前单元格是展示还是删

    2024年02月03日
    浏览(48)
  • el-table点击每一行加背景颜色

    HTML JS CSS 总结: 相当于是没次点击给它加个class类名,用到的是el-table的属性名【row-class-name】,然后还有每一行的点击事件【row-click】  给每一行滑过加高亮:  

    2024年01月19日
    浏览(43)
  • element ui el-table 如何实现带斜线的双表头

    实现思路 通过嵌套表头将两个标题设置在一个单元格内,再通过 CSS 样式增加斜线效果。 知识点:el-table、::before、transform 实现的代码

    2024年02月12日
    浏览(62)
  • 使用element-ui中的el-table回显已选中数据时toggleRowSelection报错

    最近在写一个后台,需要在表格中多选,然后点击编辑按钮的时候,需要回显已经选中的表单项 之前根据以上代码,就可以实现回显,但是这次没有,还报了一个错,报错如下 找了一下原因,这个回显是一个弹框,我在刚进页面就走了这部分逻辑,相当于在请求接口的时候

    2024年02月10日
    浏览(42)
  • element-ui中的el-table的summary-method(合计)的使用

    图片1: 图片2: 优点:         直接使用summary-method方法,直接,方便 缺点:         只是在表格下面添加了一行,如果想有多行就不行了 优点:          可以想表格下面添加多少行都行, 缺点:         列表的序号会一直往下走

    2024年02月11日
    浏览(50)
  • 【elementplus】解决el-table使用el-popconfirm,只剩下一行数据时,popconfirm提示框会被el-table边框遮挡的问题

    首先,先通过以下链接的方法,解决 在el-table中使用popconfirm、popover、tooltip、select时,出现placement错位或者框被table的列遮挡的问题 然后就是有可能会出现 el-table只剩下一行数据,popconfirm提示框依旧会被el-table边框遮挡的问题 解决方案: 给el-table设置固定高度,通常我会给

    2024年02月12日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包