项目中Slider滑块在表格中的使用及不同条件下显示不同的样式
<template>
<el-table
class="table"
:data="groupList"
style="width: 100%"
height="780"
header-cell-class-name="table-header"
:header-cell-style="{
text-align: center }"
cell-class-name="table-cell"
:cell-style="{
text-align: center }"
>
<el-table-column prop="createTime" label="进度(%)" width="200">
<template slot-scope="scope">
<div style="text-aligin: center">
<el-slider v-model="scope.row.ResPercent" :format-tooltip="handlDelta" :marks="marks" :min="0" :max="100" disabled class="tooltipClass_doing" v-if="scope.row.status == 2"></el-slider>
<el-slider v-model="scope.row.ResPercent" :format-tooltip="handlDelta" :marks="marks" :min="0" :max="100" disabled class="tooltipClass_success" v-if="scope.row.status == 3"></el-slider>
<el-slider v-model="scope.row.ResPercent" :format-tooltip="handlDelta" :marks="marks" :min="0" :max="100" disabled class="tooltipClass_error" v-if="scope.row.status == 4"></el-slider>
<p style="float: right; margin-top: -30px; margin-right: -5px; margin-left: 15px">{
{ scope.row.ResPercent }}%</p>
</div>
</template>
</el-table-column>
</el-table>
</template>
export default {
data(){
return {
marks:{}
}
},
methods：{
handlDelta(e) {
return e + %
},
}
<style lang="less" scoped>
.tooltipClass_doing {
width: 130px;
margin-right: 5px;
// margin-left: 10px;
/deep/.el-slider__bar {
background-color: #007aff;
border-radius: 3px;
}
/deep/.el-slider__button {
width: 0;
height: 0;
border: none;
}
}
.tooltipClass_success {
width: 130px;
margin-right: 5px;
// margin-left: 10px;
/deep/.el-slider__bar {
background-color: #52c41a;
border-radius: 3px;
}
/deep/.el-slider__button {
width: 0;
height: 0;
border: none;
}
}
.tooltipClass_error {
width: 130px;
margin-right: 5px;
// margin-left: 10px;
/deep/.el-slider__bar {
background-color: #f5222d;
border-radius: 3px;
}
/deep/.el-slider__button {
width: 0;
height: 0;
border: none;
}
}
</style>
效果图
