Vue+elementUI实现增删改查（前端静态页面）

最新推荐文章于 2025-03-26 21:18:24 发布

宁顾取。

最新推荐文章于 2025-03-26 21:18:24 发布

阅读量1k

点赞数 1

分类专栏：前端一小步文章标签： vue.js elementui 前端

本文链接：https://blog.youkuaiyun.com/weixin_54446335/article/details/137222878

版权

这篇文章详细介绍了如何在Vue应用中使用自定义组件BasePannel和BaseButton构建一个带有搜索、重置、增删改查功能的表格，包括配置表单和数据处理方法。

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

配置完路由，建立好页面直接复制以下代码即可。

注意：

BasePannel和BaseButton是自定义组件，需要删掉

代码：

<template>
    <div class="app-container">
        <BasePannel title="标题1">
            <el-form size="small" :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="测试单号" prop="number">
                            <el-input v-model="queryParams.number" placeholder="输入关键字搜索" clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <div>
                            <el-form-item>
                                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </BasePannel>
        <BasePannel class="top-margin">
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
                </el-col>
            </el-row>

            <el-table :data=

最低0.47元/天解锁文章