vue3使用el-slider滑塊遇到的問題及解決

更新時間：2026年03月26日 10:37:37 作者：zh814l

這篇文章主要介紹了vue3使用el-slider滑塊遇到的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

使用滑塊el-slider時出現(xiàn)了兩個問題

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都有這個滑塊，這時候就出現(xiàn)了一個問題：

滑塊上綁定的值沒更新，前一個tab上的滑塊值是多少，切換過來后這個滑塊就是多少。
后來發(fā)現(xiàn)切換后滑塊的組件未重新加載，但切換前的tab中沒有滑塊再切換過來后就會重新加載。

所以想到一個辦法：控制滑塊顯示隱藏。

我這里需要動態(tài)獲取tab中的數(shù)據(jù)，所以我在切換tab事件中先讓滑塊都隱藏，然后通過接口獲取數(shù)據(jù)是再讓滑塊顯示。

<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是獲取滑塊數(shù)據(jù)的方法，在這個方法里就可以根據(jù)需求給show賦值true或false了。

總結

就這個問題，整了將近一天，頭都大了。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue項目中使用qrcodesjs2生成二維碼簡單示例
最近項目中需生成二維碼,發(fā)現(xiàn)了很好用的插件qrcodesjs2,所以下面這篇文章主要給大家介紹了關于vue項目中使用qrcodesjs2生成二維碼的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-05-05
vue 國際化 vue-i18n 雙語言語言包
這篇文章主要介紹了vue 國際化 vue-i18n 雙語言語言包的相關知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-06-06
關于vue中如何監(jiān)聽數(shù)組變化
這篇文章主要介紹了關于vue中如何監(jiān)聽數(shù)組變化，對vue感興趣的同學，必須得參考下
2021-04-04
ElementUI表格中添加表頭圖標懸浮提示
本文主要介紹了ElementUI表格中添加表頭圖標懸浮提示，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-12-12
vue實現(xiàn)樹形表格
這篇文章主要為大家詳細介紹了vue實現(xiàn)樹形表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
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根據(jù)輸入動態(tài)生成表格的示例代碼
在現(xiàn)代電商系統(tǒng)開發(fā)中,后臺管理界面經常需要根據(jù)商品規(guī)格和規(guī)格值動態(tài)生成SKU表格,本文通過element-ui框架,展示了如何在Vue.js的環(huán)境下,利用子組件和動態(tài)綁定的方式,實現(xiàn)SKU表格的增刪改查功能
2024-11-11
Element-ui Drawer抽屜按需引入基礎使用
這篇文章主要為大家介紹了Element-ui Drawer抽屜按需引入基礎使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-07-07