Element-UI Table表格实现复选框单选效果

最新推荐文章于 2024-10-29 16:00:02 发布

原创最新推荐文章于 2024-10-29 16:00:02 发布 · 3.5k 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #js

收录于

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用Element UI实现单选表格的方法，通过监听选择事件并控制选中状态，确保每次仅能选中一行数据。同时，通过SCSS隐藏了全选复选框。

最终效果
在这里插入图片描述

*================================ 代码 ===============================*

 <el-table
          ref="multipleTable_select"
          :data="selectMemberDataList"
          :stripe="true"
          class="el-ov-single-checkbox-table"
          @select="handleSelect_select"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            label="序号"
            type="index"
            width="60"
          >
          </el-table-column>
          <el-table-column
            label="策略名称"
            prop="name"
            width="220"
          />
 </el-table>

  handleSelect_select(selection, row) {
 	  //清空所有选中
      this.$refs.multipleTable_select.clearSelection();
      //选中当前checkbox
      this.$refs.multipleTable_select.toggleRowSelection(row, true);
      //保存当前选中的对象
      this.multipleSelection_selectMember = row;
    },

/*
scss语法，不懂请百度
隐藏全选Checkbox
*/
.el-ov-single-checkbox-table {
  thead {
    th:first-child {
      span:first-child {
        display: none;
      }
    }
  }
}