思路：1.动态添加一组数据（这组数据必须填写之后才能添加，否则造成添加无用的数组）
2.每一组数据里面的添加，也必须都有数据才能进行添加多余的，否则不能添加
效果图：
捕获.PNG
<template>
<div class="eventInfo">
<div class="header">
<div class="header_top">
<span>{{ title }}</span>
<span class="close" @click="close()">x</span>
</div>
</div>
<div class="body">
<div class="peopleChoose" v-for="(item, index) in items" :key="item.id">
<div class="comm_modal_item" v-for="(_item, _index) in item.children" :key="_item.id">
<div class="comm_modal_label">
<span class="modal_label_text" v-if="index == 0">
<span v-if="_index == 0" class="iconfont icon-plus-circle pointer"
onselectstart="return false" @click="addList()"></span>
<span v-if="_index == 0 && index == 0">所选应用</span>
</span>
<span class="modal_label_text" v-if="index > 0">
<span v-if="_index == 0" @click="removeList(index)" onselectstart="return false"
class="iconfont icon-minus-circle pointer"></span>
</span>
</div>
<div style="width:100%">
<div class="input_foreach">
<div class="comm_modal_input">
<span class="and" v-if="_index > 0">且</span>
<input :ref="`关键词${_item.id}`" type="text" v-model="_item.keyword" />
</div>
<div class="comm_modal_label_right">
<span v-if="_index == 0" class="iconfont icon-plus-circle pointer"
onselectstart="return false" @click="add(index, item)"></span>
<span v-if="_index > 0" class="iconfont icon-minus-circle pointer"
onselectstart="return false" @click="remove(index, _index)"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<button class="confirm" @click="success()">确定</button>
<button class="cancel" @click="close()">取消</button>
</div>
</div>
</template>
<script>
export default {
name: "eventInfo",
props: {
title: {
type: String,
default: "12",
},
msg: {
type: Number,
default: 12,
},
},
data() {
return {
items: [{
id: 1,
children: [{
id: 1,
name: "事件1",
keyword: "12",
},
{
id: 2,
name: "事件2",
keyword: "2",
},
],
},
{
id: 2,
children: [{
id: 1,
name: "事件1",
keyword: "23",
}, ],
},
],
};
},
mounted() {},
methods: {
// 字符串拼接
spliceStr() {
let temp = "";
this.items.forEach((item) => {
temp += "/";
item.children.forEach((_item, index) => {
temp += _item.keyword ?
`${index != 0 ? "|" : ""}${_item.keyword}` :
"";
});
});
return temp;
},
// 随机生成id
roandMound(number = 10000) {
return `${+new Date()}${Math.round(Math.random() * number)}`;
},
// 列表添加
addList() {
let info = this;
let empty = info.isFirstEmpty() ? info.isFirstEmpty() : false;
let num1 = this.roandMound();
let num2 = this.roandMound();
let num3 = this.roandMound();
if (empty.flag) {
info.$nextTick(() => {
info.$refs[
`关键词${
info.items[empty.parentChildIndex].children[empty.childIndex].id
}`
][0].focus();
});
} else {
this.items.push({
id: num1,
name: `事件${num1}`,
children: [{
id: num2,
name: `事件${num2}`,
keyword: "",
},
{
id: num3,
name: `事件${num3}`,
keyword: "",
},
],
});
}
},
// 单个增加
add(index, item) {
let info = this;
let empty = this.isItemEmpty(item) ?
this.isItemEmpty(item) :
{
flag: false,
};
// 如果没有空的，则添加
if (!empty.flag) {
let idx = this.roandMound();
this.items[index].children.push({
id: idx,
name: `事件${idx}`,
keyword: "",
});
}
// 如果没有空的，添加一组数据然后聚焦
if (!empty.flag) {
info.$nextTick(() => {
info.$refs[
`关键词${
info.items[index].children[info.items[index].children.length - 1]
.id
}`
][0].focus();
});
}
// 如果是空的，直接定位到指定位置聚焦
if (empty.flag) {
info.$nextTick(() => {
info.$refs[
`关键词${info.items[index].children[empty.childIndex].id}`
][0].focus();
});
}
},
// 单个删除
remove(index, _index) {
this.items[index].children.splice(_index, 1);
},
// 列表删除
removeList(index) {
this.items.splice(index, 1);
},
// 判断第一个没有内容的input框
isFirstEmpty() {
for (let i = 0; i <= this.items.length - 1; i++) {
for (let j = 0; j <= this.items[i].children.length - 1; j++) {
if (this.items[i].children[j].keyword == "") {
return {
id: this.items[i].id,
chirdenId: this.items[i].children[j].id,
parentChildIndex: i,
childIndex: j,
flag: true,
};
}
}
}
},
// 判断，改行数据是否为空
isItemEmpty(item) {
for (let i = 0; i <= item.children.length - 1; i++) {
if (item.children[i].keyword == "") {
return {
chirdenId: item.children[i].id,
childIndex: i,
flag: true,
};
}
}
},
close() {
this.remove();
},
},
};
</script>
<style lang="less" scoped>
.eventInfo {
.body {
min-height: 300px;
.peopleChoose {
.comm_modal_item {
display: flex;
// height: 60px;
line-height: 60px;
.comm_modal_label {
width: 151px;
text-align: right;
margin-right: 20px;
.modal_label_text {
.icon-plus-circle {
color: #468de8;
margin-right: 3px;
}
}
}
.input_foreach {
width: 100%;
display: flex;
}
.comm_modal_input {
position: relative;
display: inline-block;
width: calc(100% - 10%);
.and {
position: absolute;
left: -20px;
top: -31px;
font-size: 12px;
}
}
.comm_modal_label_right {
display: inline-block;
.icon-plus-circle,
.icon-minus-circle {
margin-left: 5px;
color: #468de8;
}
.icon-minus-circle {
color: #cccccc;
}
}
}
}
}
}
</style>
网友评论