(vue)element-ui 表格实现勾选单选

原创已于 2022-10-18 16:13:16 修改 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

于 2022-10-18 16:10:31 首次发布

VUE 专栏收录该内容

213 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用Element-UI库实现表格的单选功能。通过监听`@select`事件和调用`clearSelection`及`toggleRowSelection`方法，可以实现选中和取消选中某一行的效果。详细步骤和代码示例提供了解决方案。

(vue)element-ui 表格实现勾选单选

效果：

在这里插入图片描述

重选后：
在这里插入图片描述

<el-table
   :data="tableData"
   height="400"  //固定高度滚动
   tooltip-effect="dark"
   style="width: 100%"
   border
   ref="multipleTable" //重点
   @select="handelSelectTable"  //重点
 >


// 表格单勾选
handelSelectTable(selection, row) {
  this.multipleSelection = row;
  this.$refs.multipleTable.clearSelection(); //先清空选中状态，selection值还在
  if (selection.length === 0) {
    //这里状态为勾选
    return;
  }
  this.$refs.multipleTable.toggleRowSelection(row, true); //用于切换某行选中状态
},