element-ui多層嵌套表格數據刪除

很多表格都要一個移除的功能,所謂移除,就是前端把表格的數據刪除,普通的表格刪除很簡單,調用數據的刪除方法就行.但是當表格是多層的嵌套類型時,就不能再使用普通的刪除方法了.下面介紹一種自己在項目中用的方法,比較簡單

實現思路: 把當前要移除的產品唯一值(id)與原始數據進行比較,找到當前選中的數據在原始數據中的位置,刪除這一項,重新調用表格合並處理方法處理數據

注意事項: 一定要讓后台返回一個可供比較刪除的唯一值,一般是id

表格數據展示效果:

 

 

 

頁面的代碼

methods: {
    // 原始數據
    getTable () {
      let arr = [{
        deliveryId: 1,
        deliveryNo: '8899',
        deliveryDate: '1504108800000',
        productIdList: [{
          orderNo: '1212',
          productname: '手機1',
          modelNo: 'v-20',
          productNum: 'v4545',
          unitPrice: 2399,
          productId: 11
        }, {
          orderNo: '1232',
          productname: '手機2',
          modelNo: 'v-23',
          productNum: 'v4566',
          unitPrice: 2299,
          productId: 12
        }]
      }, {
        deliveryId: 2,
        deliveryNo: '3355',
        deliveryDate: '1547469776000',
        productIdList: [{
          orderNo: '1222',
          productname: '手機4',
          modelNo: 'x-20',
          productNum: 'x4545',
          unitPrice: 699,
          productId: 13
        }, {
          orderNo: '1242',
          productname: '手機5',
          modelNo: 'x-23',
          productNum: 'x4566',
          unitPrice: 899,
          productId: 14
        }]
      }]
      this.saveTable = arr
      this.dealTable(arr)
    },

    // 表格合並方法
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        if (row.nameIndex) {
          return [row.nameIndex, 1]
        } else return [0, 0]
      }
    },

    // 處理表格數據(兩層數據)
    // 處理需要合並表格數據
    dealTable (table) {
      let getDate = [] // 存儲新表格數據
      let typeIndex = [0] // 保存id,訂單需要合並的值
      table.forEach((v, index) => {
        if (v.productIdList && v.productIdList.length) {
          v.productIdList.forEach((subV, i, typeData) => {
            if (i === typeData.length - 1) {
              typeIndex.push(typeData.length) // 類型循環完成后把數據長度存起來
            }
            subV.deliveryId = v.deliveryId
            subV.deliveryNo = v.deliveryNo
            subV.deliveryDate = v.deliveryDate
            getDate.push(subV)
          })
        }
      })
      let t = 0
      typeIndex.forEach((v, i, typeArr) => {
        if (typeArr[i + 1]) {
          getDate[t].nameIndex = typeArr[i + 1]
          t += typeArr[i + 1]
        }
      })
      this.invoiceList = getDate
    },

    // 移除
    removeOrder (row) {
      // 在原始數據中刪除
      this.saveTable.some((item, index, arr) => {
        if (item.productIdList && item.productIdList.length) {
          item.productIdList.some((subItem, subIndex) => {
            if (subItem.productId === row.productId) {
              arr[index].productIdList.splice(subIndex, 1)
              // 刪除后重新處理數據
              this.dealTable(arr)
              return true
            }
          })
        }
      })
    }
  }