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

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

1.表格加一列

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

• 1

2.隐藏掉全选按钮

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

• 1
• 2
• 3

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里包含了选中当前行的数据
    },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

4.如果要实现点击行就选中，给el-table加一个事件row-click

对应的方法是

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

• 1
• 2
• 3
• 4
• 5
• 6