Vue +el-checkbox 複数選択ボックスで単一選択を実現

1. テーブルに列を追加する

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

2. 全選択ボタンを非表示にする

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

3. テーブルに 1 つ追加します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
    },