element有单选的案例,只不过是给单选的那一条加一个颜色,而不是像多选一样有选择框
实现思路就是在前面添加选择框并处理
<el-table ref="singleTable" :data="MoneyFlowList" highlight-current-row @current-change="handleCurrentChange"
style="width: 100%">
<el-table-column width="50">
<template slot-scope="scope">
<span :class="['checkbox',isEqual(currentRow, scope.row) ? 'ischeckbox' : '']"></span>
</template>
</el-table-column>
<el-table-column label="序号" align="center" type="index" />
<el-table-column label="资金流向名称" sortable='custom' align="center" prop="name" />
<el-table-column label="资金流向说明" align="center" prop="description" sortable='custom' />
<el-table-column label="更新时间" align="center" prop="updateTime" sortable='custom' />
</el-table>
setCurrent(row) {
this.$refs.singleTable.setCurrentRow(row);
},
handleCurrentChange(val) {
this.currentRow = val;
},
isEqual(obj1, obj2) {
return JSON.stringify(obj1) === JSON.stringify(obj2);
},
setLifeMoney(){
if (this.currentRow == null) {
this.$message({
message: '请选择一条数据',
type: 'warning'
});
return
}
setOnlineMoneyFlow({
id:this.currentRow.id
}).then(res => {
this.$message({
message: res.msg,
type: 'success'
});
this.lifeMoneyDiaOpen = false
})
},
.checkbox {
display: inline-block;
position: relative;
border: 1px solid #dcdfe6;
border-radius: 2px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 14px;
height: 14px;
line-height: 14px;
background-color: #fff;
z-index: 1;
-webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
&.ischeckbox {
background-color: #1890ff;
border-color: #1890ff;
&::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
&::after {
-webkit-box-sizing: content-box;
box-sizing: content-box;
content: "";
border: 1px solid #fff;
border-left: 0;
border-top: 0;
height: 7px;
left: 4px;
position: absolute;
top: 1px;
-webkit-transform: rotate(45deg) scaleY(0);
transform: rotate(45deg) scaleY(0);
width: 3px;
-webkit-transition: -webkit-transform 0.15s ease-in 0.05s;
transition: -webkit-transform 0.15s ease-in 0.05s;
transition: transform 0.15s ease-in 0.05s;
transition: transform 0.15s ease-in 0.05s,
-webkit-transform 0.15s ease-in 0.05s;
-webkit-transform-origin: center;
transform-origin: center;
}
}
效果: