elementUI 表格组件结合单选框做单选效果显示
实现的效果:点击表格行,前面的radio框实现勾选
代码
<el-table-column align="center" label="选择" width="70">
<template #default="scope">
<el-radio-group v-model="scope.row.isChecked">
<el-radio :value="true"></el-radio>
</el-radio-group>
</template>
</el-table-column>
value值一定要绑定一个bool值,且为真,isChecked是row上新加的一个属性,目的是实现单选框的勾选状态。
表格
<el-table :data="apiTableData"
style="width: 100%"
highlight-current-row
@current-change="handleTableChange"
@cell-click="handleCellClick"
border>
事件
/** 单选表格 */
const handleTableChange =(cur,old)=>{
cur.isChecked=true
if(old){
old.isChecked = false
}
}
/** 点击单元格 */
const handleCellClick = (cur)=>{
cur.isChecked = true
}