el-table 利用索引实现删除和编辑

<template>
    <div>
         <div class="plan-right-title pl-b">
          <img src="@/assets/img/plan.png" class="plan">
          <span>医嘱</span>
         </div>
         <el-row :gutter="24">
            <el-col>
               <el-button type="primary" @click="createOrder":disabled="type==='查看检伤'">新增</el-button>
            </el-col>
         </el-row>
         <el-row :gutter="24">
            <el-col :span="24">
                <el-table :data="medicalAdviceInfoList" style="width: 100%">
                    <el-table-column prop="medicineName" label="药品名称" width="180">
                    </el-table-column>
                    <el-table-column prop="medicineDosage" label="单次用量" width="180">
                    </el-table-column>
                    <el-table-column prop="medicineUseType" label="用法">
                    </el-table-column>
                    <el-table-column prop="medicineFrequency" label="频次">
                    </el-table-column>
                    <el-table-column prop="days" label="天数">
                    </el-table-column>
                    <el-table-column prop="medicineNumber" label="总量">
                    </el-table-column>
                    <el-table-column prop="note" label="注意事项">
                    </el-table-column>
                    <el-table-column prop="medicineAdvice" label="备注">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template  slot-scope="scope">
                            <el-button @click.prevent="handleDelete(scope.$index, scope.row)" type="text":disabled="type==='查看检伤'" size="small">删除</el-button>
                            <el-button @click="handleClick(scope.$index, scope.row)" type="text":disabled="type==='查看检伤'" size="small">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <prescription v-if="isAddPrescription" ref="addPrescription" @getMedicineInfo="getMedicineInfo">
        </prescription>
        <el-row :gutter="24">
            <el-col :span="24">
                <el-form-item>
                    <el-col :span="24" class="task-button">
                        <el-button size="small" @click="cancel()" v-if="type!=='查看检伤'">取消</el-button>
                        <el-button type="primary" size="small" @click="onSubmit()" v-if="type!=='查看检伤'">提交
                        </el-button>
                    </el-col>
                </el-form-item>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    export default {
        components: { prescription
  },
   data() {
            return {
                isAddPrescription: false,
                medicalAdviceInfoList: [],
                currentIndex:''
                //定义一个currentIndex 点击编辑的时候就把index赋值给这个变量 做完操作之后把变量置空
    }
  },
  methods: {
    // 新增医嘱
            createOrder() {
                this.isAddPrescription = true
                this.$nextTick(() => {
                this.$refs.addPrescription.addPrescriptionInit()
      })
    },
    //编辑医嘱
          handleClick(index,row) {
              this.currentIndex = index
              console.log(this.currentIndex, 'this.currentIndex');
              console.log(this.medicalAdviceInfoList, 'this.medicalAdviceInfoList');
              this.isAddPrescription = true
              this.$nextTick(() => {
                  this.$refs.addPrescription.addPrescriptionInit(row,index)
      })
              console.log(row);
    },
    //删除医嘱
          handleDelete(index, row) {
              if (row) {
                  console.log(index, row);
                  console.log(this.medicalAdviceInfoList, 'this.medicalAdviceInfoList');
                  // this.medicalAdviceInfoList = this.medicalAdviceInfoList.filter(el => el.nid !== row.nid)//map不改变数组长度
                  this.medicalAdviceInfoList.splice(index,
        1);
      }
    },
    //子组件调用父组件的保存
          getMedicineInfo(item) { //item是子组件编辑后的新数据
              if (this.currentIndex !=='') { //编辑
        //不能直接判断this.currentIndex是否有值，如果索引是0的话也会被if判为false的
                  this.medicalAdviceInfoList[this.currentIndex
        ] = item
                  console.log(typeof(this.currentIndex),'this.medicalAdviceInfoList[this.currentIndex
        ]')
      } else { //新增
                  this.medicalAdviceInfoList.push(item)
      }
              this.currentIndex=''
    },
  }
}
</script>
    
<style>
    .item .el-form-item__label {
        color: red;
}
</style>