基于vue，el-table的增删查改

 

<el-table-column label="SKU" align="center">

          <template #default="scope">

            <div v-for="(item,index) in scope.row.itemList" :key="index">

              <div style="margin-bottom:2px;display:flex" >

                <el-input

                v-model="item.code"

                ></el-input>

                <span class="icon-style" @click="addSku(scope.row.itemList)"><el-icon color="#2869E8"><CirclePlus /></el-icon></span>

                <span class="icon-style" @click="deleteSku(scope.row.itemList,index)"><el-icon color="#2869E8"><Remove /></el-icon></span>

              </div>

            </div>

          </template>

        </el-table-column>

        <el-table-column label="barcode" align="center">

          <template #default="scope">

            <div v-for="(item,index) in scope.row.itemList" :key="index">

              <el-input

              style="margin-bottom:2px"

              v-model="item.barcode"

              ></el-input>

            </div>

          </template>

        </el-table-column>

        <el-table-column label="SKU预报数量" align="center">

          <template #default="scope">

            <div v-for="(item,index) in scope.row.itemList" :key="index">

              <el-input

              style="margin-bottom:2px"

              v-model="item.sum"

              ></el-input>

            </div>

          </template>

        </el-table-column>

        <el-table-column :label="$t('common.operation')" fixed="right" width="100"  class-name="small-padding fixed-width">

            <template #default="scope">

              <el-button @click="copyRow(scope.row)" type="text">{{$t('common.copy')}}</el-button>

              <el-button :disabled="cargoList.length < 2" @click="deleteRow(scope.$index, cargoList)" type="text">{{$t('common.delete')}}</el-button>

            </template>

        </el-table-column>

js部分：

//增加一条SKU

function addSku(el){

  let obj = {

  }

  el.push(obj)

}

//删除一条SKU

function deleteSku(arr,index){

  if(arr.length == 1){

    return proxy.$modal.msgError('每个箱号至少维护一条SKU');

  }else{

    arr.splice(index,1)

  }

}

/** 删除一行 */

function deleteRow(index, rows) {

  rows.splice(index, 1);

}

//复制

function copyRow(row){

  let obj = JSON.parse(JSON.stringify(row));

  cargoList.value.push(obj)

}