el-table组件多选实现单选功能

最新推荐文章于 2025-03-21 17:13:40 发布

完美不抱怨的小丑

最新推荐文章于 2025-03-21 17:13:40 发布

阅读量5.4k

点赞数 23

文章标签：前端 vue elementui javascript

本文链接：https://blog.youkuaiyun.com/m0_49969710/article/details/134699597

版权

el-table组件多选实现单选功能

在使用 el-table组件时为了实现仅能选中表格中的一条数据可将el-table组件多选功能进行改造，从而实现单选功能。

实现效果在这里插入图片描述

实现步骤

1、添加selection-change方法

<el-table
        ref="refsTable"
        :data="projectData"
        border
        v-loading="loading"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >

  handleSelectionChange(selection) {
      this.ids = [];
      if (selection.length > 1) {
      //移除上一次选中行数据
        selection.shift();
        //修改选中图标为未选中状态
        this.$refs.refsTable.clearSelection();
        //将当前选中行改为选中状态
        this.$refs.refsTable.toggleRowSelection(selection[0]);
      }
    },

2、找到表头那一行，然后把里面的复选框隐藏掉

<style lang="scss" scoped>
/**找到表头那一行，然后把里面的复选框隐藏掉**/
::v-deep .el-table__header-wrapper .el-table__header .el-checkbox {
 	 display: none;
}
</style>