求助,element-ui 动态增减的slider滑块 联动 ?

2qwffcs1
  • 1
江苏新手上路,请多包涵

1659710174533.png
1659711459886.png 图2
最近碰到一个无法解决的问题,希望各位大神们可以给个思路,非常感谢。

滑块的数量可以动态增减,前一条滑块的结束位置与后一条滑块的起始位置保持一致,挪动其中的任何一个位置,另一个联动变化

目前还没有代码 可能解释的不是很明白,希望看到问题的大佬们提出来,我尽量把遇到的这个问题描述清楚。

<template>
  <div class="block">
    <el-slider v-model="value" range>
    </el-slider>
  <-- 此处可以动态增减滑块 -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: [0, 0],
        value: [0, 20],
        value: [20, 70],
        value: [70, 90],
       // 此处为了迎合图2效果
      }
    }
  }
</script>
回复
阅读 532
1 个回答

推荐你用数组做,这样好遍历,通过 click,或者 diff 来判断出你修改的是那个,然后遍历修改所有数据的值。

比如说你改了3,然后把 4 和 5 的最小值调整一下。然后调整 2 和 1 的最大值。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏