ElementUI页面中，JS数组删除子数组的两种方法

说明：

在进行商品数据过滤时，把左侧表格中选中的数据添加到右侧表格时，就必须在原来数组中移除选中部分的值，如图：

如何实现这种效果，下面介绍两种方法

案例流程

1、在data中定义对应的数组

export default {
    
    
    data() {
    
    
      return {
    
     
      	dataListLoading: false,       
        leftDataList: [], //左边表格数据
        leftDataListSelections: [], //左边表格选中数据
        rightDataList: [], //右侧表格数据       
      }
    },
    .....
  }

2、初始化数据

mounted(){
    
        
      this.getDataList()
    },
    methods: {
    
       
      // 获取数据列表
      async getDataList(queryType) {
    
    
        this.dataListLoading = true
        const res = await this.$http({
    
    
          url: `/product/info/list`,
          method: 'get',          
        })
        let data = res.data
        if (data && data.code === 0) {
    
    
          this.leftDataList = data.page.list               
        } else {
    
    
          this.leftDataList = []         
        }
        this.dataListLoading = false
      },
 }

3、表格布局

<div class="table-box">
      <div class="left-table-box">
        <el-button size="mini" v-if="isAuth('sale:print:save')" type="success"
          @click="addAllHandle()" icon="el-icon-plus" :disabled="leftDataListSelections.length <= 0">添加</el-button>

        <el-table :data="leftDataList" size="mini" v-loading="dataListLoading" @selection-change="leftSelectionChangeHandle"
          style="width: 100%;"   height="400px"
          :header-cell-style="{ background: '#fcfcfc', color: '#606266', height:'36px'}">
          <el-table-column type="selection" header-align="center" align="center" width="50">
          </el-table-column>
          <el-table-column prop="productCode" header-align="center" align="center" label="产品编码" width="130" >
          </el-table-column>
          <el-table-column prop="productName" header-align="center" align="center" label="产品名称" width="130" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="standard" header-align="center" align="center" label="规格" width="130" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="unit" header-align="center" align="center" label="单位">
          </el-table-column>
          <el-table-column prop="salePrice" header-align="center" align="center" label="售价" width="90">
          </el-table-column>
          <el-table-column fixed="right" header-align="center" align="center" width="100" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" v-if="isAuth('sale:print:save')"
                @click="addLeftHandle(scope.row, scope.$index)">添加</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
      <div class="right-table-box">
        <el-button size="mini" v-if="isAuth('sale:print:delete')" type="danger"
          @click="deleteAllHandle()" icon="el-icon-delete" >清空</el-button>
        <el-table :data="rightDataList" size="mini" v-loading="dataListLoading"
          style="width: 100%;"  height="400px"
          :header-cell-style="{ background: '#fcfcfc', color: '#606266', height:'36px'}">
          <el-table-column prop="productCode" header-align="center" align="center" label="产品编码" width="130" >
          </el-table-column>
          <el-table-column prop="productName" header-align="center" align="center" label="产品名称" width="130" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="standard" header-align="center" align="center" label="规格" width="130" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="unit" header-align="center" align="center" label="单位">
          </el-table-column>
          <el-table-column prop="salePrice" header-align="center" align="center" label="售价" width="90">
          </el-table-column>
         <el-table-column fixed="right" header-align="center" align="center" width="100" label="操作">
           <template slot-scope="scope">
             <el-button size="mini" type="text" v-if="isAuth('sale:print:delete')"
               @click="deleteRightHandle(scope.row, scope.$index)">删除</el-button>
           </template>
         </el-table-column>
        </el-table>
      </div>

    </div>

样式

<style lang="scss" scoped>
  .el-table{
    
    
    border: 1px solid #EBEEF5!important;
    border-radius: 5px;
  }
  .table-box{
    
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .left-table-box{
    
    
      width: 49.5%;
    }
    .right-table-box{
    
    
      width: 49.5%;
    }
  }

</style>

4、实现左侧按钮 addAllHandle事件，将左侧选中的内容添加到右侧

方法1：采用遍历双循环

addAllHandle(){
    
    
    this.rightDataList.push.apply(this.rightDataList, this.leftDataListSelections)
    for(let i = 0; i < this.leftDataListSelections.length; i++){
    
    
        for(let j = 0; j < this.leftDataList.length; j++){
    
    
            if(this.leftDataList[j].productId == this.leftDataListSelections[i].productId){
    
    
              this.leftDataList.splice(j,1);
              break;
            }
        }
    }
  },

方法2：使用es6的some方法

addAllHandle(){
    
    
        this.rightDataList.push.apply(this.rightDataList, this.leftDataListSelections)
        
        let arr = this.leftDataList
        let selectedArr = this.leftDataListSelections
        this.leftDataList = arr.filter(x => !selectedArr.some(y => y.productId  === x.productId ))
      },