关于elementui tag组件,文档中是这样用的:
clipboard.png

<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事件为:

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

让编辑input框显示为false,清空编辑框的内容

出现一个bug是当输入框内容为空时,依然可以保存
解决方法是:
在保存函数那里加上新增的编辑输入框内容的验证,因为inputValue是一个数组,所以需要遍历这个数组:

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'}

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'}

请输入代码

普通数组可以用for循环一次遍历,那么怎样用js把二维数组装换为json格式字符串

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)
  }
}

雨梦迟歌
14 声望2 粉丝

引用和评论

0 条评论