Element UI slider 输入框控制范围滑块

问题：输入框控制slider范围滑块不生效

遇到一个需求，涉及到for循环展示slider，且每一个slider支持手输值控制滑块展示。一开始的实现是这样的：

		<div
            v-for="(item, index) in dataList"
            :key="index"
          >
            <el-input-number
              v-model="item.value[0]"
              :controls="false"
              size="small"
              class="num"
            />
            <el-slider
              v-model="item.value"
              :min="item.min"
              :max="item.max"
              range
              show-tooltip
              class="slider"
            />
            <el-input-number
              v-model="item.value[1]"
              :controls="false"
              size="small"
              class="num"
            />
            <div
              class="delete-btn"
              @click="handleDelete(item)">删除</div>
         </div>

手动去拖动slider滑块，input框的值确实改变了，但是反过来，去改变input框里的值，slider却没有变化。把slider的值打印出来，发现值变了，但是视图没有更新。网上看了很多种解决方法：

通过v-if使slider视图更新

缺点：会造成画面闪动

通过计算属性使视图更新

缺点：对于这种for循环展示的数据不是很好实现

通过更新组件key使视图更新

一开始觉得对于这种存在节点更新or删除的情形不是很好实现。后来想了一下，或许可以使用symbol实现，但没有尝试。

（推荐）通过调用setValues方法使视图更新

setValues这个方法是看slider源码了解到的，调用之后确实更新了视图，而且实现起来代码改动相对较小，如下所示：

		<div
            v-for="(item, index) in dataList"
            :key="index"
          >
          	<!-- input框change时调用sliderUpdate方法，传入slider的index值 -->
            <el-input-number
              v-model="item.value[0]"
              :controls="false"
              size="small"
              class="num"
              @change="sliderUpdate(index)"
            />
            <!-- 声明slider的ref值。由于是for循环数据，传入index值用于slider索引 -->
            <el-slider
              v-model="item.value"
              :min="item.min"
              :max="item.max"
              :ref="`slider` + index"
              range
              show-tooltip
              class="slider"
            />
            <el-input-number
              v-model="item.value[1]"
              :controls="false"
              size="small"
              class="num"
              @change="sliderUpdate(index)"
            />
            <div
              class="delete-btn"
              @click="handleDelete(item)">删除</div>
         </div>

methods: {
	sliderUpdate(index) {
		// 调用setValues方法更新视图
      this.$refs['slider' + index][0].setValues();
    }
}

网上搜了一下，好像没有看到有人分享这个解决方法，于是决定简单记录一下……