天天看點

vue+element-ui子頁面table表格删除、停止等操作更改父頁面對應數組内容

1、通過 Scoped slot 可以擷取到 row, column, $index 和 store(table 内部的狀态管理)的資料

//此處為不完整表格标簽,重點:<template slot-scope="props">,勿對号入座
 <el-table :data="listdata" style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
//點選事件                
<el-button  type="info" icon="el-icon-delete" @click="status(props.$index,props.row.ID,-1)" size="mini" circle></el-button>
           

2、寫對應事件傳遞參數

//對應方法并接收參數-》再傳到父頁面
   status(key,member_id,status1){
    this.$emit('editList',{key: key, value: status1});//傳參(對應數組的key和修改後的狀态)
    }
           

3、父頁面相應操作(父子頁面具體内容略—此處隻說子頁面操作修改父頁面資料)

<clientList @editList="editList"></clientList>//html

 //停止、啟用後對相應數組操作
  editList(n){
          let key = n.key;
          let value = n.value;
          this.$nextTick(function(){
              if(value==-1){
                  this.list.splice(key,1);//splice() 方法向/從數組中添加/删除項目,然後傳回被删除的項目。
              }else{
                  this.list[key]['STATUS']=value;//修改指定的值
              }
          });
      },