复选框变单选简单操作

前端攻城狮·左大

已于 2022-05-05 15:56:56 修改

阅读量1.4k

点赞数

分类专栏： CSS 文章标签： css html

于 2021-10-12 09:57:38 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46719868/article/details/120717476

版权

CSS 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了在前端开发中如何将复选框转换为单选框的两种方法。第一种方法是通过CSS的`display: none`属性隐藏全选按钮，但这种方法已不再适用。第二种方法涉及在JS中监听change事件，当选择项超过一个时清除前一个选择，确保只有一个选项被选中。此外，还提供了相应的CSS和HTML实现细节。

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

当你的复选框辛辛苦苦做好时 你亲爱的产品大大说要改成单选

在这里插入图片描述
快速方法

1.隐藏调全选按钮通过display：none
在这里插入图片描述
注意加个单独样式不然所有的勾选按钮都会被隐藏

.more_btn thead .el-table-column--selection .cell {
  display: none;
}

这个方法好像不太好用了，没关系还有第二个方案
首先html部分

 <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        @selection-change="handleSelectionChangeOne"
        :header-cell-class-name="cellClass"
        class="table"
        style="width: 100%"
      >

js部分

  cellClass(row) {
      console.log(row)
      if (row.columnIndex === 0) {
        return 'DisableSelection'
      }
    },

css部分

.table /deep/ .DisableSelection > .cell {
  display: none !important;
}

2.接下来处理单选
在这里插入图片描述
利用change事件

  handleSelectionChange (val) {
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection()
        this.$refs.multipleTable.toggleRowSelection(val.pop())
      }
     
    },