ElementUI的动态编辑标签默认只有添加,现在我要有修改的功能
1、要有添加修改的功能
2、要实现去重,不管是添加,还是修改,如果重复的话,都应该进行提示
3、需求还要实现拖拽排序功能,正在实现中。
就是实现有一个按钮,当年点击时,他会变成一个输入框,你可以输入值,失去焦点后,他就又变成一个标签,然后标签后面会有编辑和删除按钮,点击编辑可以修改当前标签的值。
效果
1、初始效果
2、点击新增时
3、点击编辑时
4、重复时
HTML
<el-tag :key="tag" type="info" v-for="tag in dynamicTags" closable :disable-
transitions="false" @close="handleClose(tag)" class="distanceTag">
<span style="margin-right: 4px;">{{ tag }}</span>
<i class="el-icon-edit" @click="changeValue(tag)"></i>
</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=" assortAdd" size="small" border-style="['dashed']"
:border-color="['#1F64E3']" @click="showInput">+新增</el-button>
JS
data(){
return{
dynamicTags: ['标签一', '标签二', '标签三'],
inputVisible: false,
inputValue: '',
tempTag: '',
// 是否是重复数据
isRepeatedData: false,
// 是否改变原来的值
isChange: false,
}},
methods:{
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
showInput() {
this.tempTag = ''
this.inputVisible = true;
this.inputValue = ''
this.isChange = false
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
this.isRepeatedData = false
let inputValue = this.inputValue;
// 去空格
inputValue = inputValue.replace(/^\s\s*/, '').replace(/\s\s*$/, '')
if (inputValue == '') {
this.inputVisible = false
return
}
// 判断新增的值是否重复
console.log(this.dynamicTags.indexOf(inputValue),this.tempTag,inputValue);
const isDuplicate = this.dynamicTags.some((tag) => tag === inputValue);
if (isDuplicate && this.tempTag !== inputValue) {
this.isRepeatedData = true
this.$message.error("不允许添加重复数据!")
return
} else {
this.isRepeatedData = false
}
if (this.isChange) {
const index = this.dynamicTags.indexOf(this.tempTag);
if (index !== -1) {
this.dynamicTags.splice(index, 1, inputValue);
}
this.inputVisible = false;
return;
}
// 点击添加时,追加
if (inputValue) {
this.dynamicTags.push(inputValue);
console.log(inputValue+'tt:'+this.dynamicTags)
}
this.inputVisible = false;
this.inputValue = '';
},
changeValue(tag) {
console.log(tag,'tag');
this.inputVisible = true
this.inputValue = tag
this.tempTag = tag
this.isChange = true
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
}
样式根据需求自己写吧
m0_60607895: 支持一下,细节很到位!【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】
2301_82243491: 支持一下,细节很到位!【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】
帝尊菜鸟: 给的数据就是有重复的,不过不是同级的,是父子间重复 { "n": "造林和更新", "c": [ { "n": "造林和更新" } ] },
tlxjoker: vue自带的,你使用watch方法,自带2个参数
qq_47708027: newVal,oldVal 这两个值是怎么来的呀,代表什么意思呢