Vue動(dòng)態(tài)獲取數(shù)據(jù)后控件不可編輯問題

更新時(shí)間：2022年04月24日 10:00:08 作者：～Phoenix

這篇文章主要介紹了Vue動(dòng)態(tài)獲取數(shù)據(jù)后控件不可編輯問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

功能介紹

由動(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)獲得過來的數(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,是接收過來的數(shù)組，具體如何接收可以看這篇文章

因?yàn)椴豢蔀榭誹ndefined才執(zhí)行判斷里面的數(shù)據(jù)，里面的this點(diǎn)不是重點(diǎn)，它們都是接收過來顯示到第二個(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>