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

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

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

功能介紹

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

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

實現(xiàn)過程

1.做判斷

因為點擊是一加載就出現(xiàn)的數(shù)據(jù)，所以是當獲得過來的數(shù)組不等于空時執(zhí)行

  //鉤子函數(shù)，初始化頁面用
  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,是接收過來的數(shù)組，具體如何接收可以看這篇文章

因為不可為空undefined才執(zhí)行判斷里面的數(shù)據(jù)，里面的this點不是重點，它們都是接收過來顯示到第二個界面的數(shù)據(jù)，關鍵看代碼：

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>