You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
1.9 KiB
Vue
89 lines
1.9 KiB
Vue
6 years ago
|
<template>
|
||
|
|
<div style="padding: 0 40px;">
|
||
|
|
<div class="selectClass">
|
||
|
|
<Radio v-model="allSelect">全选</Radio>
|
||
|
|
<i-input icon="search" placeholder="请输入店铺名称或编码" style="width: 250px"></i-input>
|
||
|
|
</div>
|
||
|
|
<div class="companyTable">
|
||
|
|
<div class="companyListClass">
|
||
|
|
<div :class="isSelect[index] == true ? 'tagColorClass' : ''" class="tagClass" @click="selectTag(item,index)" v-for="(item, index) in companyList" :key="index" >{{item.name}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "useActivityStepThree",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
allSelect: false,
|
||
|
|
companyList: [{
|
||
|
|
name: '111'
|
||
|
|
},{
|
||
|
|
name: '111'
|
||
|
|
},{
|
||
|
|
name: '111'
|
||
|
|
},{
|
||
|
|
name: '111'
|
||
|
|
},{
|
||
|
|
name: '111'
|
||
|
|
},{
|
||
|
|
name: '111'
|
||
|
|
},{
|
||
|
|
name: '111'
|
||
|
|
}],
|
||
|
|
isSelect:[],
|
||
|
|
selectValue: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.companyList.forEach(element => {
|
||
|
|
this.isSelect.push('')
|
||
|
|
this.selectValue.push('')
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
selectTag(value,index) {
|
||
|
|
this.isSelect.splice(index,1,!this.isSelect[index])
|
||
|
|
if(this.isSelect[index] === true) {
|
||
|
|
this.selectValue.splice(index, 1, value.id)
|
||
|
|
} else if(this.isSelect[index] === false) {
|
||
|
|
this.selectValue.splice(index, 1, '')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.selectClass {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.companyTable {
|
||
|
|
width: 3150px;
|
||
|
|
height: 1000px;
|
||
|
|
border: 1px solid;
|
||
|
|
margin-top: 40px;
|
||
|
|
padding: 40px;
|
||
|
|
overflow:scroll;
|
||
|
|
}
|
||
|
|
.companyListClass {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
.tagClass {
|
||
|
|
width: 31%;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
height: 120px;
|
||
|
|
line-height: 120px;
|
||
|
|
border: 1px solid #e3e8ee!important;
|
||
|
|
color: #657180!important;
|
||
|
|
background: #fff;
|
||
|
|
padding: 0 12px;
|
||
|
|
}
|
||
|
|
.tagColorClass {
|
||
|
|
background: #6ac1d1;
|
||
|
|
}
|
||
|
|
</style>
|