vue3使用el-slider滑块遇到的问题及解决

更新时间：2026年03月26日 10:37:37 作者：zh814l

这篇文章主要介绍了vue3使用el-slider滑块遇到的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

使用滑块el-slider时出现了两个问题

1、因为有几个地方都需要用到

所以建了一个单独的组件使用。

<el-slider v-model="value" :marks="list.marks" :min="list.min" :max="list.max" step="0.1" show-input />

const props = defineProps({
  list: Object,
  value: Number
});

这样使用的结果就是：本地没问题，打包到服务器上后只要滑动就报错 value is not defined。

解决办法：

let sliderVal = ref(props.value);
v-model="sliderVal"

注：value一定要是Number类型

2、我这里要使用tab切换

可能几个tab都有这个滑块，这时候就出现了一个问题：

滑块上绑定的值没更新，前一个tab上的滑块值是多少，切换过来后这个滑块就是多少。
后来发现切换后滑块的组件未重新加载，但切换前的tab中没有滑块再切换过来后就会重新加载。

所以想到一个办法：控制滑块显示隐藏。

我这里需要动态获取tab中的数据，所以我在切换tab事件中先让滑块都隐藏，然后通过接口获取数据是再让滑块显示。

<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
  <el-tab-pane v-for="item in tabsData" :key="item.value" :label="item.label" 
  :name="item.value">
    <slicer v-if="item.show" @Change="e => ChangeSlicer(e, item.prop)" :list="list" 
    :value="Number(formModel[item.prop])"></slicer>
  </el-tab-pane>
</el-tabs>

function handleClick() {
    tabsData.value.map(items => items.show = false);
    getDataList()
}

getDataList是获取滑块数据的方法，在这个方法里就可以根据需求给show赋值true或false了。

总结

就这个问题，整了将近一天，头都大了。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue实现简单无缝滚动效果
这篇文章主要为大家详细介绍了vue实现简单无缝滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue默认插槽的理解与实例代码
对于插槽的概念和使用,这是vue的一个难点,这需要我们静下心来,慢慢研究,下面这篇文章主要给大家介绍了关于vue默认插槽的相关资料,需要的朋友可以参考下
2021-11-11
解决vue单页面应用进入页面加载所有 js 的问题
这篇文章主要介绍了解决vue单页面应用进入页面加载所有 js 的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue3+vite2+mqtt连接遇到的坑及解决
这篇文章主要介绍了vue3+vite2+mqtt连接遇到的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue3父子组件通信、兄弟组件实时通信方式
这篇文章主要介绍了vue3父子组件通信、兄弟组件实时通信方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
Vuex的基本概念、项目搭建以及入坑点
Vuex是一个专门为Vue.js应用程序开发的状态管理模式，这篇文章主要介绍了Vuex的基本概念、项目搭建以及入坑点，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
vue 封装 Adminlte3组件的实现
这篇文章主要介绍了vue 封装 Adminlte3组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
vue install 注册全局组件方式
这篇文章主要介绍了vue install 注册全局组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
Vue3+Vite多项目多dist打包操作实现方式
本文介绍了如何使用Vue3和Vite搭建多项目环境,并在打包时生成多个dist包,通过创建主项目环境、配置多个dist包、以及执行打包操作,可以实现多个子项目的独立管理
2025-12-12
Vue编程三部曲之模型树优化示例
这篇文章主要为大家介绍了Vue编程三部曲之模型树优化示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07