element-ui 官网找了一圈,表格只支持多选。所以要自定义表格列的方式去实现了。
html:
<el-table-column label="操作" :align="'center'" width="55">
<template slot-scope="scope">
<!-- 单选 -->
<el-radio
:label="scope.$index"
v-model="selectRowVal"
@change="handleSelectChange(scope.$index,scope.row)"
></el-radio>
</template>
</el-table-column>
js:
//响应式声明
data() {
return {
selectRow:{},//选中的行数据包
selectRowVal:undefined,//当前选中label值
};
},
//函数
handleSelectChange(index,row){
this.selectRow = row
console.log(this.selectRow)
},
效果:
选中的行数据值:
注意:
radio 必须得给label且唯一 ,这个相对于是它的选项key。不然选中一个的时候,其他跟着全部选中。
CSS:
隐藏掉label
.el-table{
/deep/.el-radio__label{
display: none;
}
}
至此,功能实现。当然这不是唯一的方案,你也可以使用el-checkbox,然后选中的时候利用排他思想做也是可以实现的。或是就利用el-table自带的多选功能,在选中的时候使用替换思想,动态改变选中值。