vue3中，el-table表格中基础的查询、重置、新增、编辑回显、删除

效果

在这里插入图片描述

代码

1、主页面

index.vue

<!-- @Description 申请表管理 - 活动类型管理 @author wdd @date 2024/3/22 --> <template> <centerHead title="活动类型管理"></centerHead> <div class="content"> <div class="left"> <div class="ser-box"> <el-form :model="formInline" :inline="true" label-width="110px"> <el-form-item label="活动类型名称："> <el-input type="text" v-model="formInline.templateTypeName" placeholder="请输入" clearable @clear="getList"> </el-input> </el-form-item> <el-form-item label="活动类型编码："> <el-input type="text" v-model="formInline.templateTypeCode" placeholder="请输入" clearable @clear="getList"> </el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSearch">查询</el-button> <el-button type="primary" @click="onReset">重置</el-button> </el-form-item> </el-form> </div> <el-button type="primary" @click="addForm('add',{})">新增</el-button> <el-table :header-cell-style="{ background: '#eef1f6' }" ref="tableRef" :data="tableData" class="table"> <el-table-column prop="templateTypeName" align="center" label="代码分类名称"></el-table-column> <el-table-column prop="templateTypeCode" align="center" label="代码分类编码"></el-table-column> <el-table-column label="操作" align="right" width="260"> <template #default="scope"> <span class="text-btn" @click="addForm('edit',scope.row)">编辑</span> <span class="del-btn" @click="onDelete(scope.row.id)">删除</span> </template> </el-table-column> </el-table> <div class="pagin-bottom"> <el-pagination :current-page="page.currentPage" layout="total,sizes,prev,pager,next,jumper" :page-size="page.pageSize" :page-sizes="[5,10, 20, 30]" :total="page.total" @current-change="hanleCurrentChange" @size-change="handleSizeChange" /> </div> <DialogType v-if="showClassify" v-model:dialogVisible="showClassify" :info-data="classifyInfo" @emit-confirm="classifyOk" /> </div> </div> </template> <script lang="ts" setup> import { ref, reactive, inject } from 'vue'; import { useRouter } from 'vue-router' import { post } from "@/utils/path.js"; import { ElMessage, ElMessageBox } from 'element-plus' import DialogType from './components/DialogType.vue' const router = useRouter(); const constant = inject('constant') const verification = inject('verification'); const message = inject('message') const tableData = ref([]) const formInline = ref({ templateTypeName: '', templateTypeCode: '' }) const page = reactive({ pageSize: 10, currentPage: 1, total: 0, }) const showClassify = ref(false) const classifyInfo = ref({}) const addForm = (type: any, row: any) => { row.typeName = type classifyInfo.value = row showClassify.value = true } const classifyOk = () => { getList() } // 查询 const onSearch = () => { var msg1 = verification.checkParam('活动类型名称', formInline.value.templateTypeName, false, 50); if (msg1 != null) { message.error(msg1) return } var msg2 = verification.checkParam('活动类型编码', formInline.value.templateTypeCode, false, 50); if (msg2 != null) { message.error(msg2) return } getList() } // 列表数据 const getList = () => { const params = { ...formInline.value, pageNo: page.currentPage, pageSize: page.pageSize } post(constant.ieopActivity + '/activity/template/type/page/get',params).then((res) => { const { code, data } = res.data if (code == '200') { tableData.value = data.records page.pageSize = data.perPageSize page.total = Number(data.total) page.currentPage = data.currentPageNum } }) } getList() // 重置 const onReset = () => { formInline.value.templateTypeName = '' formInline.value.templateTypeCode = '' page.pageSize = 10 page.currentPage = 1 getList() } // 删除 const onDelete = (id: any) => { ElMessageBox.confirm('此操作将删除该活动类型分类, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { const params = { id: id } post(constant.ieopActivity + '/activity/template/type/delete', params).then((res) => { const { code } = res.data if (code == '200') { ElMessage.success('删除成功!') getList() } }) }).catch(() => { ElMessage.error('取消删除!') }) } //分页跳转查询 const hanleCurrentChange = (val: any) => { page.currentPage = val getList() } const handleSizeChange = (val: any) => { page.pageSize = val getList() } </script> <style lang="scss" scoped> .content { margin-top: 20px; width: 100%; .text-btn { font-size: 12px; color: #409EFF; margin-left: 6px; cursor: pointer; } .del-btn { font-size: 12px; color: #F56C6C; margin-left: 6px; cursor: pointer; } .el-button { float: right; margin: 0 0 10px 10px; } .left { padding-left: 16px; .el-table { margin: 20px 0; } .ser-box { margin: 20px 10px -20px 0px; .el-input { width: 300px; } .el-button { margin-top: 10px; margin-left: -10px; margin-right: 20px; } } } .pagin-bottom { margin-top: 20px; } } </style>

2、弹框组件页面-新增/编辑

DialogType.vue

<!-- @Description 申请表管理 - 活动类型管理 - 新增/编辑活动类型弹框 @author wdd @date 2024/3/22 --> <template> <div> <el-dialog :title="titleText" v-model="dialogVisible" :close-on-press-escape="false" :close-on-click-modal="false" width="36%"> <div style="padding-right:40px"> <el-form label-width="140px" ref="formRef" :model="formInline"> <el-form-item label="活动类型名称:" :prop="formInline.prop" :rules="{ required: true, message: '请输入', trigger: ['blur','change'], }"> <el-input v-model="formInline.templateTypeName"></el-input> </el-form-item> <el-form-item label="活动类型编码:" prop="templateTypeCode" :rules="{ required: true, message: '请输入', trigger: ['blur','change'], }"> <el-input v-model="formInline.templateTypeCode"></el-input> </el-form-item> </el-form> </div> <template #footer> <span slot="footer" class="dialog-footer"> <el-button link type="primary" @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="confirm()">确定</el-button> </span> </template> </el-dialog> </div> </template> <script lang="ts" setup> import { ref, defineProps, defineEmits, computed, watch, inject } from 'vue'; import { post } from "@/utils/path.js"; import { ElLoading, ElMessage } from "element-plus"; const formRef = ref() const dataObj = ref() const titleText = ref('') const constant = inject('constant') const verification = inject('verification'); const message = inject('message') const formInline = ref({ // templateTypeName: '', // templateTypeCode: '', }) const props = defineProps({ infoData: { default: null, type: Object, }, dialogVisible: { type: Boolean, default() { return false }, }, }) //监听方法 const emit = defineEmits(['emit-confirm', 'update:dialogVisible']) const dialogVisible = computed({ get: () => props.dialogVisible, set: (val) => emit('update:dialogVisible', val), }) watch( () => props.dialogVisible, (newVal) => { if (newVal) { dataObj.value = JSON.parse(JSON.stringify(props.infoData)) if (dataObj.value.typeName == 'add') { titleText.value = '新增' } if (dataObj.value.typeName == 'edit') { formInline.value = { ...dataObj.value } formInline.value.id = dataObj.value.id titleText.value = '编辑' } } }, { immediate: true } ) const confirm = async () => { await formRef.value.validate((valid: any) => { var msg1 = verification.checkParam('活动类型名称', formInline.value.templateTypeName, false, 50); if (msg1 != null) { message.error(msg1) return } var msg2 = verification.checkParam('活动类型编码', formInline.value.templateTypeCode, false, 50); if (msg2 != null) { message.error(msg2) return } if (!valid) { return } else { const loading = ElLoading.service({ lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)', }) const params = { templateTypeName: formInline.value.templateTypeName, templateTypeCode: formInline.value.templateTypeCode, } if (dataObj.value.typeName == 'edit') { params.id = formInline.value.id } const require = dataObj.value.typeName == 'edit' ? post(constant.ieopActivity + '/activity/template/type/update', params) : post(constant.ieopActivity + '/activity/template/type/add', params) require.then((res) => { const { code } = res.data if (code == '200') { loading.close() ElMessage.success(dataObj.value.typeName == 'edit' ? '修改成功' : '新增成功') emit('update:dialogVisible', false) formInline.value = {} emit('emit-confirm') } else { loading.close() ElMessage.error(res.message) emit('update:dialogVisible', false) } }) .catch(() => { loading.close() }) } }) } </script>

3、公共标题组件

3.1、组件页面

src\components\centerHead\centerHead.vue

<template> <div id="centerHead"> <div class="infoTitle"> <div class="smallGreen"></div> <div class="title" style="font-size: 16px">{ 
  {title}}</div> </div> </div> </template> <script> export default{ props: { title: { type: String } }, data(){ return { } }, } </script> <style lang="scss"> #centerHead{ .infoTitle { height: 49px; width: 100%; background: rgba(67,133,244,0.14) !important; border-bottom: 1px solid #E6E6E6; border-radius: 5px; .smallGreen { width: 4px; height: 100%; background-color: rgba(67,133,244,1); float: left; border-bottom-left-radius: 5px; border-top-left-radius: 5px; } .title { font-size: 16px; line-height: 49px; margin-left: 15px; float: left; font-weight: 600 !important; color: #; } } } </style>

2、注册组件

src/main.ts

import { 
    createApp, ref } from 'vue' import App from './App.vue' const app = createApp(App) app.component('centerHead', centerHead); import centerHead from "./components/centerHead/centerHead.vue";

到此这篇vue3中，el-table表格中基础的查询、重置、新增、编辑回显、删除的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

上一篇： vue3中，el-table表格的禁用、回显和多选操作——标识row-key、是否勾选selectable & toggleRowSelection(row, true)-true选中

下一篇： vue3中，wangEditor富文本组件的使用——.disable()富文本禁用、toolbarKeys配置菜单、shallowRef()创建实例、.destroy()销毁富文本、内容为html格式

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10691.html