及element-ui 去除radio单选框 label文字
需求效果:
方法一:
思路:复选框 在js
中控制 保证复选框数组中只有一项,借此实现单选。
<el-table
ref="multipleTable"
:data="tableTenderData"
tooltip-effect="dark"
style="width: 100%"
show-overflow-tooltip
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" label="选择"></el-table-column>
<el-table-column
type="index"
label="序号"
width="80"
align="center"
></el-table-column>
<el-table-column
prop="data.projectCode"
label="项目编号"
width="200"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="data.projectName"
label="项目名称"
show-overflow-tooltip
></el-table-column>
</el-table>
//被选中的信息 单选
handleSelectionChange(val) {
if (val.length > 1) {
this.$refs.multipleTable.clearSelection();
this.$refs.multipleTable.toggleRowSelection(val.pop());
}
this.multipleSelection = val;
this.tenderProjectId = this.multipleSelection[0].data.projectId;
},
效果图:
方法二:
思路:借助el-table
中有个选中行的点击事件@row-click
<el-table
ref="multipleTable"
:data="tableTenderData"
tooltip-effect="dark"
style="width: 100%"
show-overflow-tooltip
highlight-current-row
@row-click="rowClick"
stripe
>
<el-table-column label="选择" width="55" align="center">
<template slot-scope="scope">
<el-radio
:label="scope.row.data.projectId"
v-model="tenderProjectId">{{ '' }}
</el-radio>
</template>
</el-table-column>
<el-table-column
type="index"
label="序号"
width="80"
align="center"
></el-table-column>
<el-table-column
prop="data.projectCode"
label="项目编号"
width="200"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="data.projectName"
label="项目名称"
show-overflow-tooltip
></el-table-column>
</el-table>
// 选择项目 单选样式
rowClick(val){
this.tenderProjectId = val.data.projectId;
},
效果图:
ps:
element-ui 去除radio单选框 label文字
<el-radio :label="$index">{{ '' }}</el-radio>