頁面效果

450fac086a7442c6873bcc9bc2e1872f.png

數據結構

        list: [{
          name: '名稱1',
          indexs: [{
            tag: '標簽1'
          },{
            tag: '標簽2'
          },{
            tag: '標簽3'
          },{
            tag: '標簽4'
          }]
        },{
          name: '名稱2',
          indexs: [{
            tag: '標簽11'
          },{
            tag: '標簽22'
          },{
            tag: '標簽33'
          },{
            tag: '標簽44'
          },{
            tag: '標簽55'
          },{
            tag: '標簽66'
          }]
        },{
          name: '名稱3',
          indexs: [{
            tag: '標簽111'
          },{
            tag: '標簽222'
          }]
        },{
          name: '名稱4',
          indexs: [{
            tag: '標簽1111'
          },{
            tag: '標簽2222'
          },{
            tag: '標簽3333'
          }]
        },{
          name: '名稱5',
          indexs: [{
            tag: '標簽1'
          }]
        }]

實現功能

右側多選框選中后批量刪除，無接口對接本地實現，

遇到問題

一開始一直想的是foreach循環如果選中就刪除，使用的foreach+splice（），然后遇到如下問題，選中四個只刪除了兩個(當時腦子不知道咋想的。。。)
[圖片上傳失敗...(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
          });
        });
        // 該名稱下標簽為空刪除名稱
        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()">刪除指標</button>
    </div>
    <ul class="bq-title">
      <li>名稱</li>
      <li>標簽</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: '標簽1'
          },{
            tag: '標簽2'
          },{
            tag: '標簽3'
          },{
            tag: '標簽4'
          }]
        },{
          name: '名稱2',
          indexs: [{
            tag: '標簽11'
          },{
            tag: '標簽22'
          },{
            tag: '標簽33'
          },{
            tag: '標簽44'
          },{
            tag: '標簽55'
          },{
            tag: '標簽66'
          }]
        },{
          name: '名稱3',
          indexs: [{
            tag: '標簽111'
          },{
            tag: '標簽222'
          }]
        },{
          name: '名稱4',
          indexs: [{
            tag: '標簽1111'
          },{
            tag: '標簽2222'
          },{
            tag: '標簽3333'
          }]
        },{
          name: '名稱5',
          indexs: [{
            tag: '標簽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
          });
        });
        // 該名稱下標簽為空刪除名稱
        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>