參考文章：http://www.reibang.com/p/77173ad2c7f2
<el-table
v-loading="loading"
ref="multipleTable"
:data="caseList"
border
tooltip-effect="dark"
highlight-current-row
style="width: 100%"
@current-change="handleSelectionChange"
>
<!-- 單選方法,返回選中的表格行 -->
<el-table-column align="center" label="選擇" width="55">
<!-- // 添加一個(gè)多選框,控制選中與否 -->
<!-- 單選的也可以用單選框,這樣效果更明顯,選擇之后不能取消 -->
<template slot-scope="scope">
<el-radio v-model="checked" :label="scope.row.caseId"
> </el-radio
>
</template>
</el-table-column>
</el-table>
// 后臺(tái)返回data數(shù)據(jù)
// 后臺(tái)數(shù)據(jù)返回后,手動(dòng)添加一個(gè)checked屬性控制選中與否 如果是使用el-rodio單選框,不需要這一步
data.forEach((item) => {
item.checked = false;
});
this.caseList = data;
handleSelectionChange(selection) {
this.caseList.forEach((item) => {
// 排他,每次選擇時(shí)把其他選項(xiàng)都清除
if (item.caseId !== selection.caseId) {
item.checked = false;
}
});
console.log(selection); // 如果使用單選框,這里可以把當(dāng)前選中的這一項(xiàng)先保存起來(lái)
// this.ids = selection.map((item) => item.id); // 多選
// this.ids = [selection.caseId];
},
