Vue +el-checkbox multi-selection box realizes single selection

Vue +el-checkbox multi-selection box realizes single selection

1. Add a column to the table

<el-table-column type="selection" align="center" width="100" />

2. Hide the select all button

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

3. Add one to the table ref, for example: ref="Table"(add to the attribute of el-table)
add an event to the table@selection="getCurrentRow"

// 获取当前行数据
    getCurrentRow(val,row){
    
    
      if (val.length > 1) {
    
    
        this.$refs.SenderTable.clearSelection()
        this.$refs.SenderTable.toggleRowSelection(val.pop())
      } 
      this.checkedUserId = row.userId // row里包含了选中当前行的数据
    },

4. If you want to click on the row, select it, and add an event to el-tablerow-click

insert image description here
The corresponding method is

// 点击表行也可实现选中当前行
    showRowClick(row) {
    
    
      this.$refs.SenderTable.clearSelection()
      this.$refs.SenderTable.toggleRowSelection(row)
      this.checkedUserId = row.userId
    },

Guess you like

Origin blog.csdn.net/qq_38110274/article/details/120433986