el-table 多选框变单选框，隐藏全选框

最新推荐文章于 2024-02-22 10:22:02 发布

原创最新推荐文章于 2024-02-22 10:22:02 发布 · 1.4k 阅读

1 ·

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

标签

#html #vue.js #javascript

elementUi 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Element UI的表格组件中实现从多选到单选的转换，并隐藏全选框。通过监听`selection-change`事件，当选中项超过1个时，清除所有选择并保留最后一个。同时，通过CSS样式隐藏全选框并替换为文本提示。这个解决方案适用于需要限制用户只能选择单个项目的场景。

1.多选变单选方案:

<el-table ref="table"  @selection-change="handleSelectionChange">
</el-table>

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

2.隐藏全选框
html

<el-table
      v-loading="loading"
      ref="table"
      @selection-change="handleSelectionChange"
      :header-cell-class-name="cellClass"
    >

    cellClass(row){     
      if (row.columnIndex === 0&&this.fromTag == 'dialog') {           
        return 'disabledCheck'     
      }
    }

css样式

/* 去掉全选按钮 */
::v-deep .el-table .disabledCheck .cell .el-checkbox__inner{
    display: none; 
}

::v-deep .el-table .disabledCheck .cell::before{
    content: '选择';
    text-align: center;
    line-height: 37px;
}