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

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

效果

1

2

3

代码

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" l