【Vue】element table 怎么实现单选功能

• Z时代
• 2024-01-10
• 分类：技术分享

官网提供的单选是点击行通过高亮实现的选中行，想通过操作框的方式实现，如果table初始就有选中状态怎么实现。
目前实现了单选功能，但是初始选中状态不对。
效果图：

template:

<el-table

ref="userOutTable"
:data="optionsystemList"
border
@current-change="handleCurrentChange"

<el-table-column label="操作" column-key="id" width="50px" >
<template slot-scope="scope">
<el-checkbox v-model="scope.row.checked" />
</template>
</el-table-column>

</el-table>
js:

handleCurrentChange(row) {

this.optionsystemList.forEach((item) => {
if (item.id !== row.id) {
item.checked = false
} else {
item.checked = true
}
})
this.currentRow = row

},

回答

参考：答案
注意：需要给table添加属性 highlight-current-row

以上是 【Vue】element table 怎么实现单选功能 的全部内容， 来源链接： utcz.com/a/80401.html