动态加载不同的样式 el-slider 加百分号

            <div class="bottomA" v-for="item in val" :key='item.id'>
              <div class="bottomAleft" :style={backgroundColor:item.color}>{{item.levelLabel}}级别</div>
              <div class="tex">{{item.minLevel}}%</div>
              <div style="width:580px">
<el-slider v-model="item.alertLevel":class="{
'changeColor1':item.levelLabel=='IV',
'changeColor2':item.levelLabel=='III',
'changeColor3':item.levelLabel=='II',
'changeColor4':item.levelLabel=='I',}"
                  :min='item.minLevel' 
:max='item.maxLevel' 
:format-tooltip="handlDelta" 
@change="change(item)"
></el-slider>
              </div>
              <div class="tex">{{item.maxLevel}}%</div>
            </div>

//样式
.changeColor1 {
            /deep/.el-slider__bar {
                background-color: #409eff;
            }
            /deep/.el-slider__button {
                border: 2px solid #409eff;
            }
        }
        .changeColor2 {
            /deep/.el-slider__bar {
                background-color: #e6a23c;
            }
            /deep/.el-slider__button {
                border: 2px solid #e6a23c;
            }
        }
        .changeColor3 {
            /deep/.el-slider__bar {
                background-color: #ed7c1c;
            }
            /deep/.el-slider__button {
                border: 2px solid #ed7c1c;
            }
        }
        .changeColor4 {
            /deep/.el-slider__bar {
                background-color: #d9001b;
            }
            /deep/.el-slider__button {
                border: 2px solid #d9001b;
            }
        }

//加百分号
    handlDelta(e) {
            return e + '%'
        }