需求:
表格能够单击数据行进行勾选且是单选的效果。
尝试了将type="selection"改成单选效果,但是还要把全选按钮隐藏掉。很麻烦!所以觉得比较好的解决方案是在插槽里使用el-radio
代码:
<el-dialog title="历史记录查询" :visible.sync="historyDialog" width="800px" append-to-body>
<el-button type="primary" plain size="mini" style="margin-bottom:10px;" :disabled="single" @click="updateRemark" >修 改</el-button>
<div class="history-table">
<el-table
ref="table"
:data="tableData"
highlight-current-row
:cell-style="tableCellStyle"
height="400px"
border
@row-click="clickChange"
:row-key="row => { return row.id }"
>
<el-table-column class-name="allow" label="选择" width="50" align="center"><template slot-scope="scope"><el-radio v-model="tableRadio" :label="scope.row" @click.native="clickChange"><i /></el-radio></template></el-table-column>
<el-table-column
label="变动类型"
align="center"
min-width='50'
prop="changeTypeName"
:show-overflow-tooltip="true" >
<el-table-column
label="姓名"
align="center"
prop="userName"
min-width='50'
:show-overflow-tooltip="true"
/>
<el-table-column
label="更新时间"
align="center"
prop="changeTime"
min-width='100'
:show-overflow-tooltip="true"
/>
<el-table-column
label="信息"
align="center"
prop="message"
:show-overflow-tooltip="true"
/>
<el-table-column
label="备注"
align="center"
prop="remark"
:show-overflow-tooltip="true"
/>
</el-table>
</div>
<!-- 分页 -->
<el-pagination
background
layout="total, prev, pager, next"
class="elp-class"
:current-page="searchForm.currentPage"
:page-sizes="[10, 20, 30, 40, 50]"
:page-size="searchForm.size"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-dialog>
tableRadio: [],
single: true,
// 表格选中
clickChange(row) {
if (this.tableRadio === row) {
this.tableRadio = []
} else {
this.tableRadio = row
}
this.single = this.tableRadio?.id?.length ? false : true
},
<style lang="scss" scoped>
.history-table{
::v-deep .el-table__body-wrapper{
.el-radio__label {
padding-left:0;
}
}
}
</style>