1.添加的结构
<el-form-item label="设置关键字" >
<el-tag
:key="tag+index"
v-for="(tag,index) in dynamicTags"
closable
:disable-transitions="false"
@close="handleClose(tag)">
{{tag}}
</el-tag>
<el-input
class="input-new-tag"
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">+关键词</el-button>
</el-form-item>
2.data里面定义的数据,
//设置关键词
dynamicTags: [],
inputVisible: false,
inputValue: '',
3.methods里面的方法
//设置关键字
//删除
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
showInput() {
this.inputVisible = true;
this.$nextTick(() => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
//添加关键词
handleInputConfirm() {
let inputValue = this.inputValue;
console.log(inputValue);
if (inputValue) {
if(this.dynamicTags.length<5){
this.dynamicTags.push(inputValue);
}else{
this.$message.error('关键字最多可设置5个!')
}
}
this.inputVisible = false;
this.inputValue = '';
},
4.编辑回显的时候,只需要把后台返回的数据添加到this.dynamicTags数据中就可以回显了
//设置关键字赋值
if(this.ruleForm.announceContentKey.contentKey1){
this.dynamicTags.push(res.data.contentKey1)
}
if(this.ruleForm.announceContentKey.contentKey2){
this.dynamicTags.push(res.data.contentKey2)
}
if(this.ruleForm.announceContentKey.contentKey3){
this.dynamicTags.push(res.data.contentKey3)
}
if(this.ruleForm.announceContentKey.contentKey4){
this.dynamicTags.push(res.data.contentKey4)
}
if(this.ruleForm.announceContentKey.contentKey4){
this.dynamicTags.push(res.data.contentKey5)
}
网友评论