vue?el-switch初始值(默認(rèn)值)不能正確顯示狀態(tài)問(wèn)題及解決
更新時(shí)間：2022年10月22日 15:03:29 作者：Acitylion
這篇文章主要介紹了vue?el-switch初始值(默認(rèn)值)不能正確顯示狀態(tài)問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
el-switch 初始值（默認(rèn)值）不能正確顯示狀態(tài)
先去檢查一下接口返回格式 如果是字符串 不需要加冒號(hào)
active-value="1" inactive-value="2"
如果是數(shù)字
:active-value="1" :inactive-value="2"
使用el-switch顯示狀態(tài)異常
問(wèn)題表述
vue項(xiàng)目中的表格使用了el-switch，一開(kāi)始這個(gè)狀態(tài)我使用了布爾值來(lái)定義，結(jié)果顯示異常 ，明明有true應(yīng)該顯示綠色開(kāi)關(guān)的，但全都是紅色(false)狀態(tài)
百度之后找了一種方法能解決這個(gè)問(wèn)題，特此記錄
首頁(yè)表格第一次用這個(gè)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é)果
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了key在Vue列表渲染時(shí)的原理和作用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10
vue.js實(shí)現(xiàn)的綁定class操作示例
這篇文章主要介紹了vue.js實(shí)現(xiàn)的綁定class操作,結(jié)合實(shí)例形式分析了vue.js綁定class常見(jiàn)的3種操作技巧,需要的朋友可以參考下2018-07-07
詳解Vue+Element的動(dòng)態(tài)表單，動(dòng)態(tài)表格（后端發(fā)送配置，前端動(dòng)態(tài)生成）
這篇文章主要介紹了Vue+Element動(dòng)態(tài)表單動(dòng)態(tài)表格，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue實(shí)現(xiàn)的雙向數(shù)據(jù)綁定操作示例
這篇文章主要介紹了vue實(shí)現(xiàn)的雙向數(shù)據(jù)綁定操作,結(jié)合完整實(shí)例形式較為詳細(xì)的分析了vue.js進(jìn)行數(shù)據(jù)雙向綁定操作的常見(jiàn)實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了教你用Cordova打包Vue項(xiàng)目的方法，詳細(xì)的介紹了如何Vue項(xiàng)目打包成app，具有一定的參考價(jià)值，有興趣的可以了解一下2017-10-10
本文通過(guò)實(shí)例代碼給大家介紹了vue interceptor 使用,需要的朋友可以參考下2018-09-09
Fragment 是 Vue 3 中的新特性,允許一個(gè)組件模板返回多個(gè)根節(jié)點(diǎn),與傳統(tǒng)方式不同,不再需要一個(gè)額外的 DOM 元素來(lái)包裹所有內(nèi)容,本文將詳細(xì)介紹 Fragment 的概念、使用場(chǎng)景、優(yōu)點(diǎn)以及可能遇到的問(wèn)題,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了Vue組件生命周期運(yùn)行原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時(shí)間戳格式）
如果想要獲取選中的日期時(shí)間就需要通過(guò),Element Plus 日期選擇器?format屬性和value-format屬性,format指定輸入框的格式,value-format?指定綁定值的格式,本篇文章就給大家介紹Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時(shí)間戳格式）,感興趣的朋友一起看看吧2023-10-10
本文通過(guò)圖文并茂的形式給大家介紹了Vue組件之自定義事件的功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-02-02