element UI Table 多选变单选

我家媳妇儿萌哒哒

已于 2023-05-30 14:20:19 修改

阅读量1.7k

点赞数

分类专栏： element UI vue 文章标签： vue.js 前端

于 2022-04-02 09:51:42 首次发布

本文链接：https://blog.csdn.net/qq_44146522/article/details/123913412

版权

vue 同时被 2 个专栏收录

40 篇文章

订阅专栏

element UI

18 篇文章

订阅专栏

这篇博客介绍了如何在ElementUI的表格组件中实现单选功能，通过调整HTML、JS和CSS代码，确保在点击详情时不影响其他行的选择。提供了三种解决方案，包括监听选择变化、切换勾选以及删除特定事件监听。其中，方案三既能切换勾选也能取消勾选。

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

描述：
ElementUI有单选触发方式，但所做系统表格中，有一列是点击详情，所以需要利用ElementUI多选方式。实现效果如下：
将多选改为单选:
解决方法一：
1. HTML

 <el-table ref="selectTable" :data="tableData" class="more_btn" v-loading="loading" element-loading-text="拼命加载中，请稍候......" border @selection-change="selectRow" @select="selectCur">
 </el-table>

2. JS

 // 选择变化时
    selectRow(val) {
      if (val.length > 1) {
        this.$refs.selectTable.clearSelection()
        this.$refs.selectTable.toggleRowSelection(val.pop())
      }
    },

3. CSS(将全选项隐藏)

// 将全选项隐藏
.more_btn thead .el-table-column--selection .cell {
  display: none;
}

解决方法二：
JS

 selectCur(val, row) {
      console.log(val, 'val')
      console.log(row, 'row')
      this.$refs.selectTable.clearSelection()
      this.$refs.selectTable.toggleRowSelection(row, true)
    },

注：但是这种方法只能切换勾选，不可以取消勾选

解决方法三：
1. HTML
删除了 @selection-change=“selectRow” 方法

 <el-table ref="selectTable" :data="tableData" class="more_btn" v-loading="loading" element-loading-text="拼命加载中，请稍候......" border  @select="selectCur">
 </el-table>

2.JS

 // 选择时
    selectCur(selection, row) {
      const selectTable = this.$refs.selectTable
      if (selection.includes(row)) {
        selectTable.clearSelection()

        this.$nextTick(() => {
          selectTable.toggleRowSelection(row, true)
          this.selectCurRow = row
        })
      } else {
        this.selectCurRow = undefined
      }
    }

3. CSS(将全选项隐藏)

// 将全选项隐藏
thead .el-table-column--selection .cell {
display: none;
}