（二十七）VueCli3.0全栈——编辑和删除功能

注意：其中FundList.vue是父组件，Dialog.vue是子组件

1、编辑

• 将dialog和编辑框写在一个方法里面，将dialog里面的数据提升到父组件中去。(放入FundList.vue中)，这样会省代码量，提高效率

formData: {
        type: "",
        describe: "",
        income: "",
        expend: "",
        cash: "",
        remark: "",
        id: ""
      },

• 将formdata传递到Dialog.vue中去

<Dialog :dialog="dialog" :formData="formData" @update="this.getProfile"></Dialog>

• Dialog.vue中接收

props: {
    dialog: Object,
    formData: Object
  },

• 修改title：

FundList中，新增加传递的属性，用来区分是edit还是add

dialog:{
          show:false,
          title:'',
          option:'edit'
      }

• Dialog中接收title：

:title="dialog.title"

• FundList中修改handleEdit和handleAdd方法

handleEdit(index, row) {
    //   编辑
    this.dialog={
        show:true,
        title:'修改资金信息',
        option:'edit'
    };
    this.formData={
        type:row.type,
        describe:row.describe,
        income:row.income,
        expend:row.expend,
        cash:row.cash,
        remark:row.remark,
        id:row._id
    }
},
    handleAdd(){
        // 添加
        this.dialog={
            show:true,
            title:'添加资金信息',
            option:'add'
        };
        this.formData={
            type:"",
            describe:"",
            income:"",
            expend:"",
            cash:"",
            remark:"",
            id:""
        }
    }

• Dialog.vue中修改提交方法

onSubmit(form){
    this.$refs[form].validate(valid=>{
        if(valid){
            const url = this.dialog.option == "add" ? "add":`edit/${this.formData.id}`
            this.$axios.post(`/api/profiles/${url}`,this.formData)
                .then(res=>{
                //   添加成功
                this.$message({
                    message:"数据添加成功",
                    type:'success'
                })
            });

            //   隐藏对话框
            this.dialog.show = false;

            // 自动刷新
            this.$emit('update');
        }
    })
}

2、删除：FundList.vue中

handleDelete(index, row) {
      this.$axios.delete(`/api/profiles/delete/${row._id}`)
      .then(res=>{
          this.$message("删除成功！");
          this.getProfile();
      })
    }

3、效果

添加 添加成功
编辑
编辑成功
删除