vue3项目，表单增删改

效果图

ArticleChannel.vue页面代码

<script setup>
import {artGetChannelsService ,artDelChannelService} from '@/api/article.js'
import { Edit, Delete } from '@element-plus/icons-vue'
//调用open方法，ChannelEdit去修改组件内部类容
import ChannelEdit from '@/views/article/components/ChannelEdit.vue'
import{ref}from 'vue'
const loading=ref(false)
const channelList=ref([])
const getChannelList=async()=>{2loading.value=trueconst res=await artGetChannelsService()channelList.value=res.data.data// channelList.value=""console.log();loading.value=false
}
//触发dialog
const dialog=ref()
getChannelList()
const onEditChannel=(row)=>{dialog.value.open(row)
}
const onDelChannel = async (row) => {await ElMessageBox.confirm('你确认要删除该分类么', '温馨提示', {type: 'warning',confirmButtonText: '确认',cancelButtonText: '取消'})await artDelChannelService(row.id)ElMessage.success('删除成功')getChannelList()
}
//点击触发对话框
const onAddChannel = () => {dialog.value.open({})
}
//
const onSuccess=()=>{getChannelList()
}</script>
<template><page-container title='文章分类'><template #extra><el-button @click="onAddChannel">添加按钮</el-button></template>
<!-- 表格部分  label是最上面名称，prop接收数据并遍历 --><!-- -加载效果 --><el-table :data="channelList" style="width: 100%" v-loading="loading"><el-table-column label="序号" type="index" width="90" ></el-table-column><el-table-column label="分类名称" prop="cate_name"></el-table-column><el-table-column label="分类别名" prop="cate_alias" ></el-table-column><el-table-column label="操作"  width="150"><!-- 可以在这里添加默认插槽default并且通过这个插槽可以拿到数据通过 slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo默认插槽中可以自定义类容 --><template #default="{row,$index}"><!-- 按钮是支持图标的 用icon，圆的加上circle --><!-- 颜色type --><el-button @click="onEditChannel(row, $index)" type="primary" plain :icon="Edit" circle> </el-button><el-button @click="onDelChannel(row, $index)" type="danger" plain :icon="Delete" circle> </el-button></template></el-table-column><!-- table是支持#empty插槽，如果没有数据显示的页面 --><template #empty><el-empty description="没有数据"></el-empty></template></el-table><ChannelEdit ref="dialog" @success1="onSuccess"></ChannelEdit></page-container></template>
<style lang="scss" scoped></style>

ChannelEdit.vue组件代码

<script setup>
import { ref } from 'vue'
import { artEditChannelService, artAddChannelService } from '@/api/article.js'
const dialogVisible = ref(false)
const formRef=ref()
const formModel=ref({cate_name:'',cate_alias:''
})
//配置校验规则
const rules={cate_name:[{required:true,message:'请输入分类名称',trigger:'blur'},{pattern:/^\S{1,10}$/,message:'分类名称必须是1-10位非空字符',trigger:'blur'}],cate_alias:[{required:true,  message:'请输入分类别名',  trigger:'blur'},{pattern:/^[a-zA-Z0-9]{1,15}$/,  message:'分类别名必须是1-15位字母或数字', trigger:'blur'}]
}
//确认按钮的相关事件
const emit = defineEmits(['success'])//子传父调用
const onSubmit = async () => {await formRef.value.validate()const isEdit = formModel.value.idif (isEdit) {await artEditChannelService(formModel.value)ElMessage.success('编辑成功')} else {await artAddChannelService(formModel.value)ElMessage.success('添加成功')}dialogVisible.value = false//遇到子传父，通知页面更新emit('success1')
}//要对外暴露，这样其他页面才可以在这里面改类容
// 组件对外暴露一个方法 open，基于open传来的参数，区分添加还是编辑
// open({})  => 表单无需渲染，说明是添加
// open({ id, cate_name, ... })  => 表单需要渲染，说明是编辑
// open调用后，可以打开弹窗
const open=(row)=>{dialogVisible.value=true;//用展开运算符...rowformModel.value= { ...row}//添加->重置了表单类容，编辑相当于存储了回显的数据console.log(formModel.value);
}
//向外暴露组件方法
defineExpose({open
})</script><template><el-dialogv-model="dialogVisible":title="formModel.id?'编辑分类':'添加分类'"width="30%" ><!-- <span>内容部分</span> --><el-form ref="formRef" :model="formModel" :rules="rules" label-width="100px" style="padding-right:30px"><el-form-item label="分类名称" prop="cate_name"><el-input v-model="formModel.cate_name" placeholder="请输入分类名称"></el-input></el-form-item><el-form-item label="分类别名" prop="cate_alias"><el-input v-model="formModel.cate_alias" placeholder="请输入分类别名"></el-input></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="onSubmit">确认</el-button></span></template></el-dialog>
</template>

API中article.js代码

import request from '@/utils/request.js'
//获取文章分类
export const artGetChannelsService=()=>request.get('/my/cate/list')
//添加文章分类
export const artAddChannelService = (data) => request.post('/my/cate/add', data)
//编辑文章分类
export const artEditChannelService = (data) =>request.put('/my/cate/info', data)
//删除文章分类
export const artDelChannelService = (id) =>request.delete('/my/cate/del', {params: { id }})

utils里面request代码

import axios from 'axios'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router'
const baseURL = 'http://big-event-vue-api-t.itheima.net'const instance = axios.create({// TODO 1. 基础地址，超时时间baseURL,timeout: 10000
})// 请求拦截器
instance.interceptors.request.use((config) => {// TODO 2. 携带tokenconst useStore = useUserStore()if (useStore.token) {//往请求头上携带config.headers.Authorization = useStore.token}return config},(err) => Promise.reject(err)
)// 响应拦截器
instance.interceptors.response.use((res) => {// TODO 4. 摘取核心响应数据if (res.data.code === 0) {return res}// TODO 3. 处理业务失败// 处理业务失败, 给错误提示，抛出错误ElMessage.error(res.data.message || '服务异常')return Promise.reject(res.data)},(err) => {// TODO 5. 处理401错误// 错误的特殊情况 => 401 权限不足 或 token 过期 => 拦截到登录if (err.response?.status === 401) {router.push('/login')}// 错误的默认情况 => 只要给提示ElMessage.error(err.response.data.message || '服务异常')return Promise.reject(err)}
)export default instance
export { baseURL }

所需包