Vue el-table如何实现<el-table-column type=“selection“>单选
el-table-column label="手机号码" prop="telephone" align="center" />highlight-current-row////选中行高亮。二、在中添加如下方法。
一、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);
}
更多推荐
所有评论(0)