vue elementUI实现el-table点击行单选，点击行多选，点击复选框单选效果

最新推荐文章于 2024-06-05 11:00:00 发布

小仙女按时吃饭且早睡早起

最新推荐文章于 2024-06-05 11:00:00 发布

阅读量5.4k

点赞数 5

分类专栏： vue-element-admin 文章标签： vue elementui javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_35815246/article/details/119862842

版权

❤️ 以下分别介绍这四种效果的实现方式，非常简单！

首先：table绑定点击行事件 @row-click="rowClick"
绑定复选框勾选事件 @select="handleSelectionChange"

 <el-table
        ref="Table"
        :data="tableData"
        style="width: 100%"
        :select-on-indeterminate="false"
        @select="handleSelectionChange"
        @row-click="rowClick"
      >
    //......

1、点击行多选

rowClick(row, column, event) {  // 点击行多选
        // console.log(row)
        // 从已选中数据中 判断当前点击的是否被选中
        const selected = this.multipleSelection.some(item &