vue3不调用接口完成表格增删改

首先长这样

 

//父组件代码
<el-table-column align="right" fixed="right" width="100">
	<template #header>
		<el-button link @click="handleAdd" type="primary"><el-icon>
			<Plus />
			</el-icon>
        </el-button>
	</template>
		<template #default="scope">
			<div>
				<el-tooltip class="box-item" effect="light" content="编辑" placement="top">
					<el-button type="primary" link @click="handleEdit(scope.row)"><el-icon>
						<Edit />
						</el-icon>
                    </el-button>
			</el-tooltip>
				<el-tooltip class="box-item" effect="light" content="删除" placement="top">
							<el-button type="danger" link 
                           @click="handleDelete(scope.$index)"><el-icon>
									<Delete />
								</el-icon>
                            </el-button>
				</el-tooltip>
			</div>
	</template>
</el-table-column>


//这是子组件
<addmodelDpeci ref="addmodeldpeci" @modelNumberData="modelNumberData"></addmodelDpeci>



//方法
// 新增行
const handleAdd = () => {
	titleVisible.value = true; //这里是给新增编辑相当于打一个标识 新增为true
	addmodeldpeci.value.openModel({},titleVisible.value) //这是调用子组件的打开弹窗的方法
};
// 编辑行
const handleEdit = async (row: any) => {
	titleVisible.value = false;
	console.log(row);
	addmodeldpeci.value.openModel(row,titleVisible.value)//这是调用子组件的打开弹窗的方法 
};
// 删除行
const handleDelete =  (index: number)=> {
	userData.value.splice(index, 1);
};

//这是子组件传过来的数据
const modelNumberData = (item: any) => {
	console.log(item);
	userData.value.push(item)
	emit('modelSpeciData', userData.value);
}

//弹窗保存的事件  
<el-button type="primary" @click="addForm">保存</el-button>

const materiastate = ref<boolean>()


// 打开弹窗  这里接受两个参数 给参数赋值 
const openModel = (row: any,titleVisible:boolean) => {
	state.dialogVisible = true; //这是绑定弹窗
	materiastate.value = titleVisible
	state.materialForm = row;
	console.log(materiastate.value);
	
};

// 新增规格型号
const addForm = async () => {
	console.log(state.materialForm);
//在这里判断 如果为true 就是新增
	if(materiastate.value){
	 emit('modelNumberData', state.materialForm);
	}
	
	state.dialogVisible = false;
};


defineExpose({ openModel });//暴露出去 父组件直接调用