首页 IT程序员内容详情

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

2021-05-19 16089 路边土狗

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


针对整行点击 @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

2

3

4

5

6

7

8

9

10

11

12

针对每个单元格点击 @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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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


高亮样式如下:


.el-table__body tr.current-row > td {

  background-color: rgb(217, 224, 238) !important;

  cursor: pointer;

}

1

2

3

4

针对一列添加 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>

1

2

3

4

5

6

7

8

9

10

11

12

13

实现效果


————————————————

版权声明:本文为CSDN博主「票票...」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/weixin_43900414/article/details/108753774


相关标签: # vue

 暂无评论,快来抢沙发吧~

发布评论