Vue 列表对象删除数据操作

Vue 列表对象删除数据操作

参考Vue 常用列表操作实例 - 删除列表数据

<el-form>
<div class="flex_column img_div">
    <div class="flex_row"
         v-for="item in dialogForm.trainingPlanFileList" 
         :key="item.fileName" >
        {{item.fileName}}
        <span class="pointer" @click="fileDelete(item)">
            <svg-icon slot="reference" icon-class="cancel" />
            删除
        </span>
    </div>
</div>
</el-form>

//附件删除（从附件列表中删除）
fileDelete(item){
    this.$confirm("确认要删除该文件吗?", "提示", { type: "warning" })
        .then(async() => {
        var fileName = item.fileName  //v-for用到的key

        //获取要删除的数据索引
        var index = this.dialogForm.trainingPlanFileList.findIndex(
            temp => {
                if(fileName == temp.fileName){
                    return true
                }
            }
        );

        this.dialogForm.trainingPlanFileList.splice(index,1)  //获取索引之后，删除掉指定要删除的组件
    })
    console.log("this.dialogForm.trainingPlanFileList")
    console.log(this.dialogForm.trainingPlanFileList)  
    debugger
},