Vue el-table如何实现＜el-table-column type=“selection“＞单选_el-table-column type="selection

一、htmll 中添加

<el-table
  ref="multipleTable"
  :data="tableData"
  highlight-current-row     选中行高亮
  :row-key="getRowKey"
  @selection-change="selectItem"
  @row-click="onSelectOp"
>
  <el-table-column type="selection" width="55" align="center" />
  <el-table-column label="序号" type="index" align="center" />
  <el-table-column label="姓名" prop="name" align="center" />
  <el-table-column label="手机号码" prop="telephone" align="center" />
</el-table>
二、在<srcipt lang='ts' setup>中添加如下方法

function getRowKey(row:any) {

  return row.id

}

const multipleTable = ref();

const selectItem=(rows:any)=> {

  if (rows.length > 1) {

    const newRows = rows.filter((it:any, index:any) => {

      if (index == rows.length - 1) {

      multipleTable.value.toggleRowSelection(it, true);

        return true;

      } else {

       multipleTable.value.toggleRowSelection(it, false);

        return false;

      }

    });

    multipleSelection = newRows;

  } else {

    multipleSelection = rows;

  }

}

let multipleSelection = []

const onSelectOp=(row:any)=>{

 multipleTable.value.clearSelection();

 multipleTable.value.toggleRowSelection(row, true);

  multipleSelection = [];

  multipleSelection.push(row);

  console.log('onSelectOp >row',row);

}