需求:el-table 只有复选框,我们也可以通过排他思想让多选变成单选,但终究不好,所以要写一个单选框出来
思路:
1.通过 slot 自己写一个 el-radio
2. radio 必须得给 label 且唯一 ,这个相对于是它的选项 key.不然选中一个的时候,其他跟着全部选中,我这里用的是 scope.$index,更好的选择是每一项的 id 值,scope.row.id
3.label 有值以后会显示出来,我们不想要这个显示,只想要单选框,可以 css 给隐藏掉
<template>
<div>
<el-table
border
style="height: 100%"
stripe
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
:data="tableData"
>
<el-table-column label="选择" width="55">
<template slot-scope="scope">
<el-radio
:label="scope.$index"
v-model="selectRowVal"
@change="handleSelectChange(scope.row)"
>{{ "" }}
</el-radio>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
// 表格数据
tableData: [
{ name: "123", startTime: "1", endTime: "2" },
{ name: "1234", startTime: "1", endTime: "2" },
],
// 单选绑定的值,用不到
selectRowVal: "",
};
},
methods: {
// 点击单选,就可以对该条数据进行处理
handleSelectChange(row) {
console.log(row);
},
},
};
</script>
<style lang="scss" scoped>
.el-table {
:deep(.el-radio__label) {
display: none;
}
}
</style>