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项目中使用qrcodesjs2生成二维码简单示例
最近项目中需生成二维码,发现了很好用的插件qrcodesjs2,所以下面这篇文章主要给大家介绍了关于vue项目中使用qrcodesjs2生成二维码的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
vue 国际化 vue-i18n 双语言语言包
这篇文章主要介绍了vue 国际化 vue-i18n 双语言语言包的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-06-06
关于vue中如何监听数组变化
这篇文章主要介绍了关于vue中如何监听数组变化，对vue感兴趣的同学，必须得参考下
2021-04-04
ElementUI表格中添加表头图标悬浮提示
本文主要介绍了ElementUI表格中添加表头图标悬浮提示，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-12-12
vue实现树形表格
这篇文章主要为大家详细介绍了vue实现树形表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
详解Vue Elememt-UI构建管理后台
本篇文章给大家详细分享了Vue Elememt-UI构建管理后台的过程以及相关代码实例，一起参考学习下。
2018-02-02
解决vue props传Array/Object类型值,子组件报错的情况
这篇文章主要介绍了解决vue props传Array/Object类型值,子组件报错的情况，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Ant design vue table 单击行选中勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中勾选checkbox教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
element根据输入动态生成表格的示例代码
在现代电商系统开发中,后台管理界面经常需要根据商品规格和规格值动态生成SKU表格,本文通过element-ui框架,展示了如何在Vue.js的环境下,利用子组件和动态绑定的方式,实现SKU表格的增删改查功能
2024-11-11
Element-ui Drawer抽屉按需引入基础使用
这篇文章主要为大家介绍了Element-ui Drawer抽屉按需引入基础使用，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07