首页 > 其他分享 >element-plus获取表格当前行数据

element-plus获取表格当前行数据

时间:2024-05-07 19:33:05浏览次数:20  
标签:表格 element plus 当前 scope 数据

<el-table :data="filmList.result">
            <el-table-column prop="id" label="编号" width="140"/>
            <el-table-column prop="title" label="书名" width="120"/>
            <el-table-column prop="price" label="价格"/>
            <el-table-column prop="author" label="作者"/>
            <el-table-column label="修改/删除">
              <template v-slot="scope">
                <el-button type="primary" @click="handleClick(scope.row)">修改</el-button>
                <el-button type="danger">删除</el-button>
              </template>
            </el-table-column>
</el-table>

这是element-plus的表格

当时我想要获取当前行的数据,通过点击修改和删除这两个按钮对数据进行操作

如何得到当前行数据让我查资料查了很久,特此记录

              <template v-slot="scope">
                <el-button type="primary" @click="handleClick(scope.row)">修改</el-button>
                <el-button type="danger">删除</el-button>
              </template>

在表格中,需要使用按钮的地方使用template标签包裹

添加v-slot="scope"在标签里

给方法传递scope.row即可拿到当前行的数据

标签:表格,element,plus,当前,scope,数据
From: https://www.cnblogs.com/Hqqqq/p/18178217

相关文章

  • Mybatis-Plus 入门
    Mybatis-Plus简介Mybatis-Plus(简称MP)是一个Mybatis的增强工具,在Mybatis的基础上只做增强不做改变,为简化开发,提高效率而生。愿景:我们的愿景是成为MyBatis最好的搭档,就像 魂斗罗 中的1P、2P,基友搭配,效率翻倍。特性:无侵入:只做增强不做改变,引入它不会对现有工程产生......
  • [Unit testing - React] Use the waitForElementToBeRemoved Async Util to Await Unt
    Sometimes,youmightneedtowaitforanelementtodisappearfromyourUIbeforeproceedingwithyourtestsetupormakingyourassertion.Inthislesson,wewilllearnaboutawrapperaroundthewaitForthatallowsyoutowaituntilanelementisremove......
  • mybatisplus批量插入,分批的功能
    默认分批是1000一般也就改成100-1000之间示业务而定 比较简洁的一种方式如下原代码publicBooleaninsertTasks(List<TaskInfoEntity>tasks,StringagentId){//todo分批List<AgentTaskRelationEntity>entities=tasks.stream().map((......
  • 数字表格
    题目所求即\[\prod_{i=1}^n\prod_{j=1}^mf_{gcd(i,j)}\]由于没有出现\([gcd(i,j)=1]\),所以枚举\(gcd\)强行凑(下面对乘积的强行凑记住),原式就等于\[\prod_{d=1}^{min(n,m)}\prod_{i=1}^n\prod_{j=1}^mf_{gcd(i,j)}^{[gcd(i,j)=d]}=\prod_{d=1}^{min(n,m)}\prod_{p=1}^{\frac{n}{d......
  • [国家集训队] Crash的数字表格 / JZPTAB
    题目所求即\[\sum_{i=1}^n\sum_{j=1}^m\frac{ij}{gcd(i,j)}\]这里没有出现\([gcd(x,y)=1]\),所以我们枚举\(gcd\)的值来硬凑,原式就等于\[\sum_{d=1}^{min(n,m)}\sum_{i=1}^n\sum_{j=1}^m\frac{ij}{gcd(i,j)}[gcd(i,j)=d]\]为了出现\([gcd(i,j)=1]\),直接将\(i,j\)变成\(d\)的倍......
  • MybatisPlus的一些补充
    packagecom.dao.repository;importcom.baomidou.mybatisplus.extension.conditions.query.LambdaQueryChainWrapper;importcom.baomidou.mybatisplus.extension.service.impl.ServiceImpl;importcom.dao.entity.MedicareCatalogLimitPriceInfoDO;importcom.dao.mapp......
  • 重写 elementPlus 删除方法拦截前 和 tag 标签删除前提示
    <template><el-selectref="myselectref"v-model="currentValue"v-bind="$attrs"><slotname="option"><el-optionv-for="itemin$attrs.options":key="item.v......
  • vue + Ant Design Vue 表格自定义勾选状态
     //勾选规则//1.勾选当前不勾联动选子级//2.勾选当前需要联动勾选父级//3.勾选当前取消需要联动取消子级和联动取消父级,如果存在平级则不取消父级<template><a-spin:spinning="state.spining"><div><a-modalref="mModal"id="mModal"class="partial......
  • MyBatis-Plus 分页查询配置
    说明一下,使用MyBatis-Plus进行分页查询时,要先进行配置添加配置/***@AuthorNorth*@Date2024/5/6*/@ConfigurationpublicclassMPConfig{@BeanpublicMybatisPlusInterceptormybatisPlusInterceptor(){MybatisPlusInterceptormybatisPlu......
  • 原生JS表格数据常用总结
    主要是在数据报表这块,做了好几年发现,其实用户最终想要看的并不是酷炫的BI大屏,而是最基础也是最复杂的中国式报表.更多就是倾向于从表格中去获取数据信息,最简单的就是最好的,于是还是来总结一下表格这块的东西.基础表格先来实现一个最基础的表格,用table标签,......