效果图:
html:
<table class="tag-table">
<tbody>
<tr v-for="(item, index) in form.tagList" :key="index">
<td>333</td>
<td>
<div
class="tag-box"
v-for="(item1, index1) in item.tags"
:key="index1"
>
<span>{{ item1.label }}</span>
<i
class="tag-close el-icon-close"
@click="delTag(item1, index)"
></i>
</div>
<el-input
class="input-new-tag"
v-if="item.inputVisible"
v-model="item.inputValue"
:ref="`saveTagInput${index}`"
size="small"
@keyup.enter.native="handleInputConfirm(item, index)"
@blur="handleInputConfirm(item, index)"
>
</el-input>
<div v-else class="new-tag" @click="showInput(item, index)">
+ 新增
</div>
</td>
</tr>
</tbody>
</table>
js:
handleClose(item1, index) {
this.form.tagList[index].tags.splice(
this.form.tagList[index].tags.indexOf(item1),
1
);
},
showInput(item, index) {
this.$set(this.form.tagList, index, {
...item,
inputVisible: true,
});
this.$nextTick(() => {
let saveTagInput = `saveTagInput${index}`;
this.$refs[saveTagInput][0].$refs.input.focus();
});
},
handleInputConfirm(item, index) {
console.log(item.inputValue, 666);
if (item.inputValue) {
this.form.tagList[index].tags.push({
label: item.inputValue,
});
this.$set(this.form.tagList, index, {
...item,
inputVisible: false,
inputValue: "",
});
}
},
async getTag() {
const {
code,
data = [],
message,
} = await this.$store.dispatch(
"taskPlan/getTag",
this.$route.query.strategyId
);
if (code !== 0) {
this.$message.error(message);
return;
}
this.form.tagList = data;
for (let i = 0; i < this.form.tagList.length; i++) {
this.form.tagList[i].inputVisible = false;
this.form.tagList[i].inputValue = "";
}
},