Vue動(dòng)態(tài)獲取數(shù)據(jù)后控件不可編輯問題
老規(guī)矩:先走波流程!
看實(shí)現(xiàn)效果,更好根據(jù)大家的問題相對(duì)應(yīng)的解決自己的問題。
功能介紹
由動(dòng)圖可以看到,當(dāng)我點(diǎn)擊添加試題時(shí),因?yàn)橐砑有?shù)據(jù),跳轉(zhuǎn)過去的界面必須是可以使用的。再當(dāng)我點(diǎn)擊編輯,攜帶過去的數(shù)據(jù)是不能更改的,只更改下方題干部分。
具體如何實(shí)現(xiàn)控件獲得數(shù)據(jù)后不可更改呢?主要是用到判斷,可以看到這里我只給input和select組件設(shè)置了不可用,但他們都是共用一個(gè)方法。
實(shí)現(xiàn)過程
1.做判斷
因?yàn)辄c(diǎn)擊是一加載就出現(xiàn)的數(shù)據(jù),所以是當(dāng)獲得過來(lái)的數(shù)組不等于空時(shí)執(zhí)行
//鉤子函數(shù),初始化頁(yè)面用 created() { this.carryCurrentRowCode = this.$route.query.carryCurrentRowCode; if (this.carryCurrentRowCode != undefined) { // 試題分類 this.questionClassification = this.carryCurrentRowCode.questionClassifyId; // 試題類型 this.v_type = this.carryCurrentRowCode.questionTypeId; // 試題難度 this.v_difficulty = this.carryCurrentRowCode.degreeInitial; // 試題編號(hào) this.i_number = this.carryCurrentRowCode.serial; this.statusData(); this.editNotavailable = true; }
carryCurrentRowCode,是接收過來(lái)的數(shù)組,具體如何接收可以看這篇文章
因?yàn)椴豢蔀榭誹ndefined才執(zhí)行判斷里面的數(shù)據(jù),里面的this點(diǎn)不是重點(diǎn),它們都是接收過來(lái)顯示到第二個(gè)界面的數(shù)據(jù),關(guān)鍵看代碼:
this.editNotavailable = true;
2.在控件中使用editNotavailable
課程、試題分類下拉框和試題編號(hào)共用:disabled="editNotavailable"
<!-- 下拉框-課程分類 --> <el-select :disabled="editNotavailable" v-model="couponSelected " class="select_coures" </el-select> > <!-- 下拉框-試題類型 --> <el-select :disabled="editNotavailable" class="select_qutestions" v-model="v_type" @change="q_type" > </el-select> <!-- 接收試題編號(hào) --> <el-input v-model="i_number" :disabled="editNotavailable" placeholder="請(qǐng)輸入編號(hào)" style="width:10%" class="m_left" > </el-input>
3.定義editNotavailable的初始狀態(tài)
editNotavailable: false,
課程、試題分類下拉框和試題編號(hào)共用,點(diǎn)擊編輯后:true不可用,false可用。正常跳轉(zhuǎn)用false表示可用,if判斷里因?yàn)槭遣豢捎玫乃愿臑閠rue不可用。
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3響應(yīng)式對(duì)象的api超全實(shí)例詳解
可以把數(shù)據(jù)變成響應(yīng)式api的方法叫做響應(yīng)式api,下面這篇文章主要給大家介紹了關(guān)于vue3響應(yīng)式對(duì)象api的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05使用Vue Composition API寫出清晰、可擴(kuò)展的表單實(shí)現(xiàn)
這篇文章主要介紹了使用Vue Composition API寫出清晰、可擴(kuò)展的表單實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06vue+elementUI實(shí)現(xiàn)簡(jiǎn)單日歷功能
這篇文章主要為大家詳細(xì)介紹了vue+elementUI實(shí)現(xiàn)簡(jiǎn)單日歷功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09vue實(shí)現(xiàn)導(dǎo)出word文檔的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)導(dǎo)出word文檔(包括圖片),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01Vue3?<script?setup?lang=“ts“>?的基本使用
<script setup>?是在單文件組件 (SFC) 中使用?composition api?的編譯時(shí)語(yǔ)法糖,本文主要講解<script setup>?與?TypeScript?的基本使用,感興趣的朋友跟隨小編一起看看吧2022-12-12Vue實(shí)現(xiàn)textarea固定輸入行數(shù)與添加下劃線樣式的思路詳解
這篇文章主要介紹了使用Vue實(shí)現(xiàn)textarea固定輸入行數(shù)與添加下劃線樣式的思路詳解,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06