vue对象添加属性(key:value)、显示和删除属性
效果图<FormItem label="输入项填充内容 :" prop="value" :rules="name1" style="margin-top: 20px"><Button type="success" @click="addKey">新增</Button><table class="...
·
效果图
<FormItem label="输入项填充内容 :" prop="value" :rules="name1" style="margin-top: 20px">
<Button type="success" @click="addKey">新增</Button>
<table class="table">
<tr>
<th>key值</th>
<th>value值</th>
<th>操作</th>
</tr>
<tr v-for="(item,key) in keyValues" v-if="keyValueShow">
<td>{{key}}</td>
<td>{{keyValues[key]}}</td>
<td><Button type="error" @click="keyDelete(key)">删除</Button></td>
</tr>
<tr>
<td>
<FormItem>
<Input class="application-ipt" type="text" placeholder="输入内容" v-model="keyValue.key"></Input>
</FormItem>
</td>
<td colspan="2">
<FormItem>
<Input class="application-ipt" type="text" placeholder="输入内容" v-model="keyValue.value"></Input>
</FormItem>
</td>
</tr>
</table>
</FormItem>
添加属性
addKey(){
if(this.keyValue.key==''){
this.$Message.error('请输入key值');
}else if(this.keyValue.value==''){
this.$Message.error('请输入value值');
}else{
if(JSON.stringify(this.keyValues) !== '{}'){
for(var k in this.keyValues){
if(k == this.keyValue.key) {
this.$Message.error('key值不能重复');
this.keyValue.key=''
return
}else{
this.keyValues[this.keyValue.key]=this.keyValue.value
this.keyValue.key=''
this.keyValue.value=''
//可以强制重新渲染页面
this.$forceUpdate();
}
}
}else{
this.keyValues[this.keyValue.key]=this.keyValue.value
this.keyValue.key=''
this.keyValue.value=''
this.$forceUpdate();
}
}
},
删除属性
keyDelete(key){
var keyValues = this.keyValues
for (var k in keyValues) {
console.log(k,key)
if(k==key){
delete keyValues[k]
}
this.keyValues=keyValues
this.$forceUpdate();
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)