el-slider 动态显示 marks

如果用到多个，要么二次封装一个组件，要么就硬用

我这里没有用封装组件，先尝试一下，有时间在封装

html代码

<el-slider
        @input="getVal(fc.marks, fc.score)"
        v-model="fc.score"
        :marks.sync="fc.marks"
        />

声明一下，那么你的marks数据就要是在结构里面的，这样能保证每一个数据源都可以是独立的，互不干扰。
我的fc是v-for循环的变量

js代码 重点 -> 深拷贝

// marks 数据，当接口获取数据时，把这个数据塞给每一条没做数据源，但是要深拷贝这个数据
marks: {
  60: '及格',
  75: '良好',
  85: '优秀',
 },

// 获取数据时，也就是接口，赋值
_detail() {
  detail({id: this.id,}).then(res => {
    if (res.code == '000000') {
      res.module.result.forEach(item => {
        it.marks = {}
        it.marks = JSON.parse(JSON.stringify((this.marks)))
      })
      this.form = res.module.result
    }
  })
},

// 动态的显示函数 这里重点是$set的使用
getVal(m, v) {
  let d = {}
  if (v >= 60 && v < 75) {
    d = {
      60: {
        style: {
          color: '#1989FA'
        },
        label: this.$createElement('strong', '及格')
      },
      75: '良好',
      85: '优秀',
    }
  } else if (v >= 75 && v < 85) {
    d = {
      60: '及格',
      75: {
        style: {
          color: '#1989FA'
        },
        label: this.$createElement('strong', '良好')
      },
      85: '优秀',
    }
  } else if (v >= 85 && v <= 100) {
    d = {
      60: '及格',
      75: '良好',
      85: {
        style: {
          color: '#1989FA'
        },
        label: this.$createElement('strong', '优秀')
      },
    }
  } else if (v >= 0 && v < 60) {
    d = {
      60: '及格',
      75: '良好',
      85: '优秀',
    }
  }
  this.$set(m, [60], d[60])
  this.$set(m, [75], d[75])
  this.$set(m, [85], d[85])
}