頁面效果
450fac086a7442c6873bcc9bc2e1872f.png
數(shù)據(jù)結(jié)構(gòu)
list: [{
name: '名稱1',
indexs: [{
tag: '標(biāo)簽1'
},{
tag: '標(biāo)簽2'
},{
tag: '標(biāo)簽3'
},{
tag: '標(biāo)簽4'
}]
},{
name: '名稱2',
indexs: [{
tag: '標(biāo)簽11'
},{
tag: '標(biāo)簽22'
},{
tag: '標(biāo)簽33'
},{
tag: '標(biāo)簽44'
},{
tag: '標(biāo)簽55'
},{
tag: '標(biāo)簽66'
}]
},{
name: '名稱3',
indexs: [{
tag: '標(biāo)簽111'
},{
tag: '標(biāo)簽222'
}]
},{
name: '名稱4',
indexs: [{
tag: '標(biāo)簽1111'
},{
tag: '標(biāo)簽2222'
},{
tag: '標(biāo)簽3333'
}]
},{
name: '名稱5',
indexs: [{
tag: '標(biāo)簽1'
}]
}]
實現(xiàn)功能
右側(cè)多選框選中后批量刪除妹笆，無接口對接本地實現(xiàn)块请，
遇到問題
一開始一直想的是foreach循環(huán)如果選中就刪除拳缠，使用的foreach+splice（）窟坐，然后遇到如下問題，選中四個只刪除了兩個(當(dāng)時腦子不知道咋想的。讯沈。。)
[圖片上傳失敗...(image-44b5f3-1662600608087)]
// 最開始寫的刪除方法
deleteBtn() {
this.list.forEach((i) =>{
i.indexs.forEach((c,cIndex) =>{
if(c.checked == true) {
console.log(c.checked);
i.indexs.splice(cIndex,1)
}
});
});
}
解決辦法
this.list.forEach((i) =>{
// 刪除選中對象
i.indexs = i.indexs.filter(item => {
return !item.checked
});
});
// 該名稱下標(biāo)簽為空刪除名稱
this.list = this.list.filter(item2 => {
return item2.indexs.length > 0;
});
頁面全部代碼如下
<template>
<div style="width: 50%;margin: 0 auto">
<div align="right">
<button @click="deleteBtn()">刪除指標(biāo)</button>
</div>
<ul class="bq-title">
<li>名稱</li>
<li>標(biāo)簽</li>
</ul>
<ul class="bq-con" v-for="(item,index) in list" :key="index">
<li :style="{lineHeight:`${30*item.indexs.length}px`}">
<span>{{item.name}}</span>
</li>
<li>
<div v-for="(iItem,iIndex) in item.indexs" :key="iIndex">
<span class="mb-5" :title="iItem.tag">{{iItem.tag}}</span>
<el-checkbox v-model="iItem.checked" class="checkbox" ref="checkbox"></el-checkbox>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'home',
data() {
return {
list: [{
name: '名稱1',
indexs: [{
tag: '標(biāo)簽1'
},{
tag: '標(biāo)簽2'
},{
tag: '標(biāo)簽3'
},{
tag: '標(biāo)簽4'
}]
},{
name: '名稱2',
indexs: [{
tag: '標(biāo)簽11'
},{
tag: '標(biāo)簽22'
},{
tag: '標(biāo)簽33'
},{
tag: '標(biāo)簽44'
},{
tag: '標(biāo)簽55'
},{
tag: '標(biāo)簽66'
}]
},{
name: '名稱3',
indexs: [{
tag: '標(biāo)簽111'
},{
tag: '標(biāo)簽222'
}]
},{
name: '名稱4',
indexs: [{
tag: '標(biāo)簽1111'
},{
tag: '標(biāo)簽2222'
},{
tag: '標(biāo)簽3333'
}]
},{
name: '名稱5',
indexs: [{
tag: '標(biāo)簽1'
}]
}]
}
},
methods:{
deleteBtn() {
// 最開始的寫法
// this.list.forEach((i) =>{
// i.indexs.forEach((c,cIndex) =>{
// if(c.checked == true) {
// i.indexs.splice(cIndex,1)
// }
// });
// });
this.list.forEach((i) =>{
// 刪除選中對象
i.indexs = i.indexs.filter(item => {
return !item.checked
});
});
// 該名稱下標(biāo)簽為空刪除名稱
this.list = this.list.filter(item2 => {
return item2.indexs.length > 0;
});
// 取消多選框選中
this.$refs.checkbox.forEach((i) =>{
if(i.model == true) {
i.model =false;
}
})
},
},
}
</script>
<style lang="less" scoped>
button{
background: red;
color: white;
border: none;
padding: 10px 30px;
border-radius: 10px;
margin-bottom: 20px;
}
.bq-title {
overflow: hidden;
background: #849f9c;
height: 30px;
line-height: 30px;
color: white;
li{
float: left;
width: 45%;
text-align: center;
}
}
.bq-con{
background: #eff9f8;
border-radius: 5px;
padding: 5px;
margin-top: 15px;
overflow: hidden;
.checkbox{
margin-left: 3px;
}
li{
float: left;
width: 45%;
text-align: center;
div{
height: 28px;
margin: 0 auto 5px auto;
}
span{
font-size: 14px;
border-radius: 5px;
height: 28px;
line-height: 28px;
width: 80%;
background: #c5dad8;
display: inline-block;
}
.mb-5{
margin: 0 auto 5px auto;
}
}
}
</style>
