關於使用elementui tag組件的踩坑記錄

關於elementui tag組件,文檔中是這樣用的:
clipboard.pngjson

<el-tag
   :key="tag"
   v-for="tag in dynamicTags"
   closable
   :disable-transitions="false"
   @close="handleClose(tag)">
   {{tag}}
</el-tag>
<el-input
   v-if="inputVisible"
   v-model="inputValue"
   ref="saveTagInput"
   size="small"
   @keyup.enter.native="handleInputConfirm"
   @blur="handleInputConfirm"
> 
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>

可是會出現當文本內容特別長的時候出現關閉按鈕隱藏的問題,而且內容不可再次編輯,因此若是要知足這種需求,解決方法是放棄el-tag組件,本身實現一個tag組件,選用input做爲tag的替換,實現控制input框編輯的div的關閉事件。數組

clipboard.png
其中具體關閉inputClose事件爲:app

inputClose(index) {
   this.$set(this.inputVisible, index, false)
   this.inputValues[index] = ""
}

讓編輯input框顯示爲false,清空編輯框的內容函數

出現一個bug是當輸入框內容爲空時,依然能夠保存
解決方法是:
在保存函數那裏加上新增的編輯輸入框內容的驗證,由於inputValue是一個數組,因此須要遍歷這個數組:ui

for(let i = 0, addLen = inputValue.length; i <  addLen; i++) {
    if(this.visible[i]&& inputValue[i] == '' || inputValue[i].length > 200) {
    ...//一些提示
    }
 }

如何用js將數組轉化爲json數組,而後讓後臺解析:
普通的數組格式是:['a','b','c']
普通的json數據格式是: {'1':'a','2','b','3','c'}this

var a = ['a','b','c']
var json = ""
// 遍歷數組
for(var i = 0; i < json; i++) {
json[i] = a[i]
}
Json.stringfy(json)
// 轉化後的結果爲
{'1':'a','2','b','3','c'}spa

請輸入代碼

普通數組能夠用for循環一次遍歷,那麼怎樣用js把二維數組裝換爲json格式字符串3d

var data = [ ['選項1',10],['選項2',10],['選項3',50],['選項4',30] ];
var oneArray = [].concat.apply([],data);
var jsonArray = [];
var nameArr = [];
for(var i=0;i<oneArray.length;i++){
  if(i%2 == 0) {
    var dataName=oneArr[i];
     var str='{name:"'+oneArr[i]+'",value:'+oneArr[i+1]+'}';
     var jsonStr = eval('('+str')');
     nameArr.push(dataName)
     jsonArr.push(jsonStr)
  }
}
相關文章
相關標籤/搜索