element-ui 里面的table 点击行进行切换选中状态

最新推荐文章于 2025-03-20 15:12:55 发布

@玩Go那个玩!

最新推荐文章于 2025-03-20 15:12:55 发布

阅读量1.1w

点赞数 3

分类专栏： element-ui 文章标签： element-ui里面table 复选框切换

本文链接：https://blog.youkuaiyun.com/qq_43653325/article/details/90311675

版权

element-ui 专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何在Element-UI的表格组件中实现通过点击行来切换选中状态，强调了使用复选框的用户体验，并指出单击即选中的优势。同时，作者提到了一个潜在问题，即当点击不同行时，由于共用的标识符导致选中状态可能反转，提出了需要改进的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html 里面是:
 <el-table
   :data="tableData"
    border
    height="315"
    style="width: 100%"
    highlight-current-row
    @current-change="handleCurrentChange"//这个只会触发一次, 所以弃用
    @selection-change="handleSelectionChange"
    @row-click = "btn"//点击当前行就会触发
    ref="eltableCurrentRow"//必须有ref 这个实例,才能去掉用toggleRowSelection 这个方法
  >
</el-table>
data 里面去定义一个flag:false;

method 的里面去写:
 btn(row,col,event){
      this.flag = !this.flag;  
      this.$refs.eltableCurrentRow.toggleRowSelection(row,this.flag);      
  }

实现效果:
点击第一次:
在这里插入图片描述
点击第二次

也不是本身的勾选框不好使用, 只是能点击就选中, 我觉得更有用户体验;还会再加东西的,~~~

//但是这样有一个弊病, 就是如果你换行去点击, 因为flag 是一个公共的标识符, 那么点击另一行时, flag 的变化,和第一次点击的状态其实是恰恰相反
所以这里的处理办法改一下

 btn(row,col,event){
 //把这个flag 变成当前的行的私有物,这样一来,每次变化的时候, 变化的都是你当前行的布尔值, 
      row.flag = !row.flag;  
      this.$refs.eltableCurrentRow.toggleRowSelection(row,row.flag);      
    },