vue +el-checkbox多选框实现单选

vue +el-checkbox多选框实现单选

1.表格加一列

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

2.隐藏掉全选按钮

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

3.给表格加一个 ref,例如:ref="Table" (加在el-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.如果要实现点击行就选中,给el-table加一个事件row-click

在这里插入图片描述
对应的方法是

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

猜你喜欢

转载自blog.csdn.net/qq_38110274/article/details/120433986