ElementUI中Slider滑块的使用

项目中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>

效果图