vue?el-switch初始值(默認(rèn)值)不能正確顯示狀態(tài)問題及解決

更新時間：2022年10月22日 15:03:29 作者：Acitylion

這篇文章主要介紹了vue?el-switch初始值(默認(rèn)值)不能正確顯示狀態(tài)問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

el-switch 初始值（默認(rèn)值）不能正確顯示狀態(tài)

先去檢查一下接口返回格式如果是字符串不需要加冒號

active-value="1" inactive-value="2"

如果是數(shù)字

:active-value="1" :inactive-value="2"

使用el-switch顯示狀態(tài)異常

問題表述

vue項(xiàng)目中的表格使用了el-switch，一開始這個狀態(tài)我使用了布爾值來定義，結(jié)果顯示異常，明明有true應(yīng)該顯示綠色開關(guān)的，但全都是紅色(false)狀態(tài)

百度之后找了一種方法能解決這個問題，特此記錄

首頁表格第一次用這個el-switch，此處禁止修改，設(shè)置了disabled,state的值也由布爾值換成了數(shù)字0或者1。這里就顯示正常了

<el-table-column prop="state" label="狀態(tài)" width="120">
  <template slot-scope="scope"> 
    <el-switch
      disabled
      v-model="scope.row.state"
      active-value="1"
      inactive-value="0"
      active-color="#13ce66"
      inactive-color="#ff4949"
    >
    </el-switch>
  </template> 
</el-table-column>

第二處用的是彈框中使用的，可以修改的

<el-form-item label="狀態(tài)" props="state" required>
  <el-switch 
    v-model="editForm.state" 
    active-value="1" 
    inactive-value="0" 
    @change="changeState(editForm.state)"></el-switch>
</el-form-item>

methods: {
    changeState(state) {
      this.editForm.state = state;
      console.log('嘎嘎地 ',state);
    }
}

打印結(jié)果

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用Vuex實(shí)現(xiàn)一個筆記應(yīng)用的方法
這篇文章主要介紹了使用Vuex實(shí)現(xiàn)一個筆記應(yīng)用的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
Vue觸發(fā)隱藏input file的方法實(shí)例詳解
這篇文章主要介紹了Vue觸發(fā)隱藏input file的方法實(shí)例詳解，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下
2019-08-08
vue中注冊自定義的全局js方法
這篇文章主要介紹了vue中注冊自定義的全局js方法,文中給大家補(bǔ)充介紹了vue自定義函數(shù)掛到全局的方法，需要的朋友可以參考下
2019-11-11
Vue在項(xiàng)目中如何引入本地Json數(shù)據(jù)
這篇文章主要介紹了Vue在項(xiàng)目中如何引入本地Json數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
VuePress在build打包時window?document?is?not?defined問題解決
這篇文章主要為大家介紹了VuePress在build打包時window?document?is?not?defined問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-07-07
vue對于低版本瀏覽器兼容問題的解決思路
很多時候使用vue開發(fā)的項(xiàng)目,由于無法在低版本瀏覽器上運(yùn)行,所以需要解決下,下面這篇文章主要給大家介紹了關(guān)于vue對于低版本瀏覽器兼容問題的解決思路,需要的朋友可以參考下
2023-02-02
vue父組件通過props如何向子組件傳遞方法詳解
在Vue 中,可以使用 props 向子組件傳遞數(shù)據(jù)，下面這篇文章主要給大家介紹了關(guān)于vue父組件通過props如何向子組件傳遞方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-08-08
vue2.0 自定義日期時間過濾器
本文給大家?guī)韮煞N方法實(shí)現(xiàn)vue2.0 自定義日期時間過濾器，需要的的朋友參考下吧
2017-06-06
vue 組件內(nèi)獲取actions的response方式
今天小編就為大家分享一篇vue 組件內(nèi)獲取actions的response方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue組件傳值過程中丟失數(shù)據(jù)的分析與解決方案
這篇文章主要給大家介紹了關(guān)于Vue組件傳值過程中丟失數(shù)據(jù)的分析與解決方案，文中通過圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03