对element ui动态可编辑的tag进行优化,点击tag后变为input可编辑
https://element.eleme.io/#/zh-CN/component/tag
重点1:$set的用法 修改响应数据
在data中声明editable: [],
通过this.$set(this.editable, index, true);
来修改数组
this.$set(vm.item, indexOfItem, newValue);
this.set(vm.item, indexOfItem, newValue);
参数1:要处理的数组名称
参数2:要处理的数组索引
参数3:要处理的数组的值
this.$set(this.editable, index, true);
重点2: ref的使用
-
ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用。
-
如果ref 是循环出来的,有多个重名,那么ref的值会是一个数组 ,此时要拿到单个的ref 只需要循环就可以了。
this.$refs[editableInput][0].$refs.input.focus();
重点3:element ui 中input获取焦点
Vue.nextTick()
- 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。 - 在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。
this.$nextTick((_) => {
this.$refs.saveTagInput.$refs.input.focus();
});
源代码
<template>
<el-form
label-width="100px"
class="my-form"
size="mini"
label-position="left"
>
<el-form-item label="部门职位">
<div class="inline-box">
<div v-for="(tag, index) in depatment_role_name" :key="index">
<el-input
class="input-new-tag"
v-if="editable[index]"
v-model="tag.label"
:ref="'editableInput' + index"
size="small"
placeholder="请输入职位"
@keyup.enter.native="handleEditableInputConfirm(tag, index)"
@change="handleEditableInputConfirm(tag, index)"
@blur="handleEditableInputBlur(tag, index)"
maxlength="20"
show-word-limit
></el-input>
<el-tag
v-else
@click="showEditTagInput(index)"
closable
:disable-transitions="false"
@close="handleClose(tag, index)"
>{{ tag.label }}</el-tag
>
</div>
<div>
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
maxlength="20"
show-word-limit
></el-input>
<el-button
v-else
class="button-new-tag"
size="small"
@click="showInput"
>+ 新增职位</el-button
>
</div>
</div>
</el-form-item>
</el-form>
</template>
export default {
components: {
// "v-chart": ECharts,
},
data() {
return {
depatment_role_name: [
{
value: 1,
label: "选择1",
},
{
value: 2,
label: "选择2",
},
{
value: 3,
label: "选择3",
},
],
inputVisible: "",
editable: [],
inputValue: "",
};
},
methods: {
//============添加职位=====================
//添加 职位信息 input显示
showInput() {
this.inputVisible = true;
this.$nextTick((_) => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
//添加 职位信息 input失去焦点
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
var tagInfo = {
label: inputValue,
value: this.depatment_role_name.length + 1,
};
this.depatment_role_name.push(tagInfo);
}
this.inputVisible = false;
this.inputValue = "";
},
//============编辑职位=====================
//编辑 职位信息 input显示
showEditTagInput(index) {
this.$set(this.editable, index, true);
this.$nextTick((_) => {
var editableInput = "editableInput" + index;
this.$refs[editableInput][0].$refs.input.focus();
});
},
//编辑 职位信息 input发生改变
handleEditableInputConfirm(item, index) {
if (item.label) {
this.$set(this.editable, index, false);
} else {
this.$message({ message: "请输入职位信息", type: "info" });
}
},
//编辑 职位信息 input失去焦点
handleEditableInputBlur(item, index) {
this.$set(this.editable, index, false);
},
//删除部门职位
handleClose(tag, index) {
this.depatment_role_name.splice(index, 1);
},
},
};
.inline-box {
display: flex;
}
.inline-box > div {
margin-right: 5px;
}