由于使用JS的push会导致元素重复
现在实现向数组中不重复添加对象
<!--作者:zhangfan
页面名称:向数组中不重复添加对象-->
<template>
<div class="topCon">
<el-select
v-model="devType"
clearable
filterable
placeholder="请选择"
@change="selectChanged"
:filter-method="selectChange"
>
<el-option
v-for="(item,index) in options"
:key="index"
:label="item.projectName"
:value="index"
></el-option>
</el-select>
<el-row>
<ul class="projectAuthorization">
<li v-for="(tag,index) in tags" :key="index" class="TagList">
<div class="projectAuthorizationTag" :title="tag.projectName">{{tag.projectName}}</div>
<div class="tagClose">
<i class="el-icon-close" @click="handleClose(tag)"></i>
</div>
</li>
</ul>
</el-row>
</div>
</template>
<script>
export default {
name: "enterpriseDetail",
data() {
return {
tags: [],
devType: "",
options: [
{
id: "1",
projectName: "目录一"
},
{
id: "2",
projectName: "目录二"
},
{
id: "3",
projectName: "目录三"
},
{
id: "4",
projectName: "目录四"
},
{
id: "5",
projectName: "目录五"
}
],
value: ""
};
},
computed: {},
methods: {
selectChanged(value) {
const vm = this;
var itemTags = this.options[vm.devType];
let index = vm.tags.findIndex(item => {
if (item.projectName === itemTags.projectName) {
return true;
} else {
return false;
}
});
if (index == -1) {
if (itemTags) {
var obj = {};
obj.projectName = itemTags.projectName;
obj.projectId = itemTags.id;
vm.tags.pushNoRepeat(obj);
}
}
},
handleClose(name) {
const vm = this;
const index = this.tags.indexOf(name);
vm.tags.splice(index, 1);
},
selectChange(val) {
console.log(val);
}
}
};
</script>
<style scoped lang="less">
.projectAuthorization {
width: 217px;
height: 200px;
padding: 10px 20px;
background-color: #f5f7fa;
border: 1px solid #dee5f4;
margin-top: 10px;
overflow-y: auto;
.TagList {
position: relative;
overflow: hidden;
cursor: pointer;
.projectAuthorizationTag {
width: 100px;
display: block;
margin-top: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
}
.tagClose {
float: left;
cursor: pointer;
line-height: 41px;
}
.tagClose:hover {
color: red;
}
}
.TagList:hover {
background: #e4ebf1;
}
}
</style>