鍍金池/ 問答/HTML/ element-ui switch組件如何選擇性觸發(fā)它的change事件

element-ui switch組件如何選擇性觸發(fā)它的change事件

有這樣一個場景：需要先從數(shù)據(jù)庫拿到當(dāng)前的開關(guān)狀態(tài)，改變當(dāng)前的界面開關(guān)顯示，但是UI的改變會觸發(fā)change事件，發(fā)送命令給設(shè)備。并且在實際使用中，也需要實時的從數(shù)據(jù)庫拿到數(shù)據(jù)，改變UI，但是又會觸發(fā)change事件，發(fā)送命令給設(shè)備。

clipboard.png

Q1：怎么才能在不觸發(fā)change事件的前提下，改變element-ui的switch狀態(tài)?；蛘哒f怎么區(qū)分是進(jìn)行了開關(guān)控制還是程序獲取到數(shù)據(jù)對UI進(jìn)行的改變，這種情況應(yīng)該怎么解決呢

回答
編輯回答
喵小咪

不使用switch組件。找兩個checkbox圖標(biāo)，一個選中，一個未選中，通過@click來實現(xiàn)功能，v-if顯示相應(yīng)圖標(biāo)

2017年6月6日 21:35
編輯回答
焚音

可以定義一個參數(shù)trigger，值為false，獲取數(shù)據(jù)賦值后置為true。
所有的switch的change事件處理中首先判斷trigger的值，若為false，直接ruturn false。

2018年7月9日 03:32
編輯回答
笑忘初
<el-switch
    style="display: block"
    v-model="value4"
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-text="按月付費(fèi)"
    inactive-text="按年付費(fèi)"
    @change="value4Cahgne">
  </el-switch>

注意value4，它拿到的就是true（選中）或false（未選中），你根據(jù)這個值來設(shè)定就行了

2017年7月18日 17:35