Vue+Element 踩坑記錄

Vue+Element 踩坑

 

1. 獲取後臺返回的數據，是個數組，循環後展現出來

<el-table-column :label="$t('common.cardModel.guz')" sortable="custom" prop="cEqpFinx.assetNo"> 

  <template slot-scope="scope">
    <div v-for="(item,index) in scope.row.cEqpFinx" :key="index"> 
      {{item.assetNo}} 
    </div> 
  </template> 
</el-table-column>

 

 

2. @click.once 只容許點擊一次，而後讓按鈕隱藏

 

在data申明

 

 在方法裏面加入isShow

 

 

3. 如上功能需求更新：點擊增長按鈕，彈出對話框同時該按鈕隱藏；關閉對話框，該按鈕出現

思路：這裏考慮假隱藏，不用display:none或者isShow，而是用不一樣的class，用的是opacity:0

 

 

 

data: 

 

 

樣式：

 後面樣式裏還加了pointer-events:none; 由於是假隱藏，因此若是不阻止點擊事件，不當心點到仍是會彈出對話框~

 

方法裏面添加下：

在點擊事件裏面不激活class

在關閉事件裏面，激活class

 

 

4. vue el-input 使用maxlength規定長度的時候，若是須要限制輸入的數字，定義type="number"，則maxlength會失效。

解決方案：

type="number" 數字類型

oninput="if(value.length>11)value=value.slice(0,11)"  限制長度

 

 slice() 方法可從已有的數組中返回選定的元素。slice() 不修改數組，獲得是一個子數組