Vue + ElementUI 给el-table添加点击事件

古城微笑少年丶 2022-12-10 02:27 697阅读 0赞

可以分三种情况实现点击事件

1.  针对整行点击 `@row-click=""`

<el-table
      :data="userList"
      highlight-current-row
      border
      @row-click="handleSeleUserId"
    >
      <el-table-column
        prop="id"
        label="UID"
        align="center"
      />
    </el-table>

1.  针对每个单元格点击 `@click=""`

<el-table
      :data="userList"
      highlight-current-row
      border
    >
      <el-table-column
        prop="name"
        label="UID"
        align="center"
      >
        <template scope="scope">
          <div @click="handleSeleUserId(scope.row)">{ {  scope.row.name }}</div>
        </template>
      </el-table-column>
    </el-table>

`highlight-current-row` 属性控制点击是否显示高亮

高亮样式如下：

.el-table__body tr.current-row > td { 
      background-color: rgb(217, 224, 238) !important;
      cursor: pointer;
    }

1.  针对一列添加 `radio`

<el-table-column
      label="用户ID"
      align="center"
    >
      <template slot-scope="scope">
        <el-radio
          v-model="userQuery.userId"
          :label="scope.row.id"
          prevent
          @change="handleCheck(scope.row)"
        />
      </template>
    </el-table-column>

实现效果  
![在这里插入图片描述][20200925175827683.png_pic_center]

[20200925175827683.png_pic_center]: /images/20221123/a160a690ddae4971a8c6ec8140989643.png

发表评论取消回复

表情：

评论列表（有 0 条评论，697人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 点击事件失效

点击事件失效的情况，总共有三种 1. 没有点到那个元素，比如说div>span 事件绑定在div上，但是它可能点来点去是在span标签上面，这种情况，把@click点击事件绑

淡淡的烟草味﹌/ 2022年12月20日 03:14/ 0 赞/ 375 阅读

相关 PDF 添加点击事件

PDF 添加点击事件 > 想要给 pdf 添加事件，首先需要在你的 pdf 源文件上添加占位符，（本案例占位符是 usertask），然后使用 iframe 自带的属性获取

素颜马尾好姑娘i/ 2022年12月16日 13:22/ 0 赞/ 432 阅读

相关帆软给图形添加点击事件

setTimeout(function() \{ var c = document.getElementsByTagName("linearGradient")\[

布满荆棘的人生/ 2022年12月13日 01:44/ 0 赞/ 554 阅读

相关 Vue + ElementUI 给el-table添加点击事件

可以分三种情况实现点击事件 1. 针对整行点击 `@row-click=""` <el-table :data="userList" hi

古城微笑少年丶/ 2022年12月10日 02:27/ 0 赞/ 698 阅读

相关 php img点击事件,html中如何给图片添加点击事件的详解

首先使用jQuery选择器获取到想要绑定click事件的img元素，然后可以直接绑定click方法，也可以通过bind方法绑定。这里详细介绍一下bind方法。 jQuery

不念不忘少年蓝@/ 2022年11月17日 14:32/ 0 赞/ 350 阅读

相关给submit提交按钮添加点击事件（JavaScript）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl

快来打我*/ 2022年09月30日 00:45/ 0 赞/ 276 阅读

相关 elementUI使用之table表格如何给行元素添加点击事件

1. 官方文档提供的event事件 ![有row-click事件可以实现行点击事件][row-click] 2. 在代码中绑定事件 ![绑定事件][

比眉伴天荒/ 2022年09月01日 09:10/ 0 赞/ 318 阅读

相关 VUE ROUTER-LINK 上添加点击事件

点击事件失败原因： router-link会阻止click事件，你可以试试只用click不用native,事件是不会触发的。而a标签不会阻止。在vue学习中遇到给rout

心已赠人/ 2022年05月31日 13:13/ 0 赞/ 274 阅读

相关给RecyclerView的Item添加点击事件

RecyclerView监听事件处理在ListView使用的时候，该控件给我们提供一个onItemClickListener监听器，这样当我们点击Item的时候，会回调相关的方

淩亂°似流年/ 2022年05月23日 05:54/ 0 赞/ 287 阅读

相关 Vue点击事件

1.点击事件 <div v-on:click=openTab(item); class="message-item message-unread" v-for="

ゞ浴缸里的玫瑰/ 2022年05月19日 00:22/ 0 赞/ 322 阅读