fix: el-slider 范围滑块配合使用input框时，数据更新视图不更新

情景

在el-slider两边使用el-input-number情景下，当v-model给el-slider和input框绑定的是同一个值的时候如下

<template>
  <div style="display: flex; align-items: center;">
      <el-input-number 
      	v-model="values[0]" 
      	style="width: 120px;"  
      	size="small" 
      	:precision="0" 
      	:step="1" 
      	:min="1" 
      	:max="99" >	
      </el-input-number>
      <el-slider 
      	v-model="values" 
      	style="width: 250px; 
      	margin: 0 10px;" 
      	range :min="1" 
      	:max="100" 
      	:step="1" >
      </el-slider>
      <el-input-number 
      	v-model="values[1]" 
      	style="width: 120px;"  
      	size="small" 
      	:precision="0" 
      	:step="1" 
      	:min="2" 
      	:max="100" >
      </el-input-number>
  </div>
</template>
<script>
export default {
  data() {
    return {
      values: [1, 10],
    }
  },
}
</script>

问题

当滑动滑块的时候，input框里的值会发生变化，但是当修改input框里的值的时候，滑块并不会发生变化。

解决办法

通过给el-slider绑定一个:key值，然后给el-input-number框绑定change事件，在这个事件里面修改el-slider的key值即可解决。

完整代码如下：

<template>
  <div style="display: flex; align-items: center;">
      <el-input-number 
      	v-model="values[0]" 
      	style="width: 120px;"  
      	size="small" 
      	:precision="0" 
      	:step="1" 
      	:min="1" 
      	:max="99" 
      	@change="numberChange">	
      </el-input-number>
      <el-slider 
      	v-model="values" 
      	style="width: 250px; 
      	margin: 0 10px;" 
      	range :min="1" 
      	:max="100" 
      	:step="1" 
      	:key="componentKey">
      </el-slider>
      <el-input-number 
      	v-model="values[1]" 
      	style="width: 120px;"  
      	size="small" 
      	:precision="0" 
      	:step="1" 
      	:min="2" 
      	:max="100" 
      	@change="numberChange">
      </el-input-number>
  </div>
</template>
<script>
export default {
  data() {
    return {
      values: [1, 10],
    }
  },
  methods() {
  	numberChange() {
      this.componentKey+=1;
    }
  }
}
</script>