父组件
// ref : 为了引用只组件 updateData: 为了接收子组件的值
<companyAdd :source="source" ref="companyAdd" @updateData="updateData" :isShowEditVisible="isShowEditVisible"></companyAdd>
import companyAdd from "@/views/components/Company/index";
components: {companyAdd },
handleUpdate(row) {
//companyAdd => ref="companyAdd"
//handleUpdate => 子组件的方法
this.$refs.companyAdd.handleUpdate(row);
},
updateData(data) {
if (data.resultCode == 200) {
this.isShowEditVisible = false
const index = this.tableList.findIndex(n=> n.id == data.data.id)
if (index == -1) {
this.tableList.unshift(data.data)
} else {
//this.tableList[index] = data.data
this.$set(this.tableList,[index],data.data)
}
}
},
子组件
<template>
<el-dialog append-to-body :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="isShowEditVisible" title="新增客户" width="650px">
<el-form ref="dataForm" :model="formdata.row" :rules="rules" label-width="65px">
<el-col :span="24">
<el-form-item label="名称" prop="title">
<el-input v-model="formdata.row.title" />
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item v-model="formdata.row.invoice_type" label="发票类型" label-width="90px">
<el-select v-model="formdata.row.invoice_type" placeholder="发票类型">
<el-option v-for="(item, index) in formdata.option.invoice_type_list" :label="item" :value="index" :key="index" />
</el-select>
</el-form-item>
</el-col>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="_isShowEditVisible">取消</el-button>
<el-button :loading="listLoading" size="small" type="primary" class="title1" @click="updateData">确定</el-button>
</div>
</el-dialog>
</template>
<script>
import { getList, ToDoAction } from "@/api/common";
export default {
props: {
isShowEditVisible: {
type: Boolean,
default: false
},
source: {
type: String,
default: 'list'
}
},
data() {
return {
formdata: {
row: {
id: "",
title: "",
invoice_type: "",
},
option: {
invoice_type_list: []
},
},
}
},
methods: {
//这个方法为了子组件关闭弹窗
_isShowEditVisible() {
this.isShowEditVisible = false
//this.$emit('update:isShowEditVisible', false)
},
//这个方法是通过id , 请求接口获取数据
handleUpdate(row) {
console.log(1111, row)
ToDoAction({ id: row.id, actiontype: 'company_add', action: 'add' }, {}).then(response => {
if (response.resultCode == 200) {
this.isShowEditVisible = true
response.data.row.invoice_type = response.data.row.invoice_type.toString()
this.formdata = Object.assign({}, response.data)
} else {
this.$message({
message: response.data,
type: 'error'
})
}
})
},
//这个方法是弹窗里面的确定按钮(提交数据)
updateData() {
const tempData = Object.assign({}, this.formdata);
this.$refs["dataForm"].validate((valid) => {
if (valid) {
ToDoAction(
{ id: tempData.id, actiontype: "company_add", action: "save" },
tempData.row
).then((response) => {
if (response.resultCode == 200) {
this.isShowEditVisible = false
this.$emit('update:isShowEditVisible', false) //修改isShowEditVisible的值 传给父组件
//this.$parent.fetchData();
this.$emit('updateData', response) //父组件有个updateData方法,将response传递到父组件的方法里面
} else {
this.$message({
message: response.data,
type: "error",
});
}
});
}
});
},
}
}
</script>
声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权