Vue-動態獲取數據後控件不可編輯

老規矩：先走波流程！

看實現效果，更好根據大家的問題相對應的解決自己的問題。

功能介紹：

由動圖可以看到，當我點擊添加試題時，因爲要添加些數據，跳轉過去的界面必須是可以使用的。再當我點擊編輯，攜帶過去的數據是不能更改的，只更改下方題幹部分。

具體如何實現控件獲得數據後不可更改呢？主要是用到判斷，可以看到這裏我只給input和select組件設置了不可用，但他們都是共用一個方法。

實現過程：

1.做判斷，因爲點擊是一加載就出現的數據，所以是當獲得過來的數組不等於空時執行

  //鉤子函數，初始化頁面用
  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;
      // 試題編號
      this.i_number = this.carryCurrentRowCode.serial;
      this.statusData();
      this.editNotavailable = true;
}

carryCurrentRowCode,是接收過來的數組，具體如何接收可以看另一篇博客：https://blog.csdn.net/weixin_39332529/article/details/106742146

因爲不可爲空undefined才執行判斷裏面的數據，裏面的this點不是重點，它們都是接收過來顯示到第二個界面的數據，關鍵看代碼：this.editNotavailable = true;

2.在控件中使用editNotavailable

課程、試題分類下拉框和試題編號共用: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>
<!-- 接收試題編號 -->
<el-input
     v-model="i_number"
     :disabled="editNotavailable"
     placeholder="請輸入編號"
     style="width:10%"
     class="m_left"
      >
</el-input>

3.定義editNotavailable的初始狀態

      editNotavailable: false,

課程、試題分類下拉框和試題編號共用，點擊編輯後：true不可用，false可用。正常跳轉用false表示可用，if判斷裏因爲是不可用的所以改爲true不可用。

要是沒有了解可留言