使用vue3封装一个dialog组件

最新推荐文章于 2025-04-10 14:06:01 发布

m0_45925246

最新推荐文章于 2025-04-10 14:06:01 发布

阅读量1.3k

点赞数 9

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_45925246/article/details/135090643

版权

本文介绍了如何在使用Element-UI构建的Vue3项目中，通过定义Expose在父子组件间传递数据，实现表格的添加和编辑功能，包括编辑和新建弹窗的打开以及数据回显。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在element-ui做的表格中最常见的就是表格的增删改查，在添加和修改大部分我们公用一个弹窗，vue3中，我我们会用的defineExpose():

//子组件
const defaultForm = {
  title: '',
  cate_id: '',
  cover_img: '',
  content: '',
  state: ''
}
const formModel = ref({ ...defaultForm })
const open = (row) => {
  visibleDrawer.value = true
  if (row.id) {
    console.log('编辑回显')
  } else {
    formModel.value = { ...defaultForm }
  }
}

//父组件
 <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
</template>


const handleEdit = (index, row) => {
  dialogRef.value.open(row)  //编辑
}
const addCate = () => {
  dialogRef.value.open({})  //添加
}