基于element增删改查入门案例

最新推荐文章于 2025-05-03 17:14:26 发布
原创 最新推荐文章于 2025-05-03 17:14:26 发布 · 355 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#java

本文介绍如何使用 Element UI 框架实现业主信息的增删改查功能，包括数据展示、编辑、删除及新增操作。文章详细展示了 HTML 结构、Vue 实例配置、数据请求与响应等关键步骤。

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

1.element 组件安装
引入式

<!-- 引入样式 -->
 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme- chalk/index.css">
 <!-- 引入组件库 --> 
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>

2.案例
1.查询所有业主

界面

<div id="app">
    <template>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="roomName"
                    label="房间编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="owner_name"
                    label="业主名字"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="owner_phone"
                    label="电话">
            </el-table-column>
            <el-table-column
                    prop="owner_ids"
                    label="电话">
            </el-table-column>
            <el-table-column
                    prop="owner_phone"
                    label="身份证号码">
            </el-table-column>
            <el-table-column
                    prop="owner_car"
                    label="车位信息">
            </el-table-column>
            <el-table-column
                    prop="ownere_mail"
                    label="业主邮箱">
            </el-table-column>
        </el-table>
    </template>

</div>

数据刷新

<script>
    var vm =new Vue({
        el:"#app",
        data:{
            tableData:[

            ]
        },
        mounted:function () {
            axios
                .get('/selectOwnerRoom')
                .then(response=>{
                    //初始化数据 
                    // 通过 箭头函数 调用的方法 this 指向 vue 实例，
                    // 如果function this 指向 的是axios 本身
                    this.tableData=response.data
                }).catch(function (error) {
                console.log(error)
            })

        }
    })
</script>

2.更新业主
添加操作按钮

 <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>

修改界面弹框

<!-- //修改界面弹窗-->
        <el-dialog :visible.sync="visible" title="Hello world">
            <!--:model="updateform" 双向绑定updateform数据-->
            <el-form ref="form" :model="updateform" label-width="80px">
                <el-form-item label="房间编号">
                    <el-input v-model="updateform.roomName"></el-input>
                </el-form-item>
                <el-form-item label="业主姓名">
                    <el-input v-model="updateform.owner_name"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="updateform.owner_phone"></el-input>
                </el-form-item>
                <el-form-item label="身份证号码">
                    <el-input v-model="updateform.owner_ids"></el-input>
                </el-form-item>
                <el-form-item label="车位">
                    <el-input v-model="updateform.owner_car"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="updateform.ownere_mail"></el-input>
                </el-form-item>

                <el-form-item> 
                    <el-button type="primary" @click="updateOwner">确认</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form
        </el-dialog>

弹框默认不显示

  //修改弹窗默认不显示
            visible:false,
            updateform:{
                roomName:'',
                owner_name:'',
                owner_phone:'',
                owner_ids:0,
                owner_car:'',
                ownere_mail:''
            }

显示弹框

   methods:{
            /* table 数据的的下标   row 每一行数据 对应tableData 每一个元素*/
            handleEdit(index,row){
                //初始化弹窗数据
                this.updateform=row;
                //显示窗口
                this.visible=true
            }
        }

提交 修改内容

   updateOwner:function () {
                axios
                    .get('/updateOwner',{
                        params:this.updateform
                    }).then(response=>{
                        if (response.data=='success'){
                            //刷新页面
                            window.location.reload()
                        }else {
                            this.$message.error('修改失败')
                        }
                }).catch(function (error) {
                    console.log(error)
                })
            }

流程
点击编辑按钮,拿到该行数据赋值给updateform， visible变为true，弹窗打开，弹窗界面与 updateform双向绑定，修改弹窗内的数据updateform数据随着改变，然后把updateform内的数据通过 params:this.updateform传到后台完成修改

3.删除业主
用的是MessageBox 弹框模板

 handleDelete(index,row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //确定删除提交服务器
                    axios
                        .get('/dateOwner',{
                            params: {
                                id:row.owner_id
                            }
                    }).then(response=>{
                        if (response.data=='success'){
                            //刷新页面
                            window.location.reload()
                        }else {
                            this.$message.error('删除失败')
                        }
                    }).catch(function (error) {
                        console.log(error)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }

handleDelete方法和操作按钮对应
4.增加业主
界面弹窗

 <!--新增业主弹窗-->
        <el-dialog :visible.sync="addvisible" title="新增业主">
            <!-- //:model="form"双向绑定from表单数据-->
            <el-form ref="addform" :model="addform" label-width="80px">

                <el-form-item label="房间编号">

                    <el-select v-model="addform.Room_id" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.roomId"
                                :label="item.roomName"
                                :value="item.roomId">
                        </el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="业主姓名">
                    <el-input v-model="addform.owner_name"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="addform.owner_phone"></el-input>
                </el-form-item>
                <el-form-item label="身份证号码">
                    <el-input v-model="addform.owner_ids"></el-input>
                </el-form-item>
                <el-form-item label="车位">
                    <el-input v-model="addform.owner_car"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="addform.ownere_mail"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addOwner">增加业主</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

弹框默认不显示

 addform:{
                roomName:'',
                owner_name:'',
                owner_phone:'',
                owner_ids:0,
                owner_car:'',
                ownere_mail:'',
                Room_id:'',
            },
            options:[]

提交数据

   addOwner:function () {
                axios
                    .get('/addOwner',{
                        params:this.addform
                    }).then(response=>{
                    console.log("data:"+response.data);
                    if (response.data == 'success') {
                        //刷新
                        window.location.reload();
                    }else{
                        this.$message.error('新增失败');
                    }
                    this.addvisible = false;
                }).catch(function (error) {
                    console.log(error)
                })
            }
Spring Boot Vue Element入门实战（十四）前后台整合增删改查
岁月不饶人，我亦未曾饶过岁月
09-24 1692
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 新建学生页面，我们来整合前后台增删改查接口 （一）添加 //点击添加按钮，currentLoginType != 'student是权限拦截 <el-form-item v-if="currentLoginType != 'student'"> <el-button type="prim...
Vue框架实现对前端数据表的增删改查(第六课)
qq_56248592的博客
11-18 1884
前端对数据的增删改查你看到过吗?今天带你来实现一下在前端就页面上实现对数据的增伤改查
vue.js+Element实现表格里的增删改查
11-26
新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element （http://element.eleme.io/#/zh-CN）来配合vue.js进行样式填充 之前用过angularjs 用到后来 发现越来越难学 于是就决定用vue.js 下面就介绍一下vue.js应用在表格里的增删改查 首先引入一下element的js [removed][removed] 然后引入需要用到的vue相关的js文件 [removed][removed] <script
基于element的增删改查思路
smallico的博客
11-20 331
基于element的增删改查思路 1.find查询数据 //初始化页面表格数据 getTableList(arg) { var params = { pageIndex: this.pageIndex, size: this.size }; if (arg && this.isSearching) {...
ElementUI实现表格增删改查
HEWNCP的博客
12-24 3541
之前在vue中实现表格增删改查，但是没有样式所以就比较丑，这次使用elementUI框架实现该功能界面样式进行优化，如果有需要的可以直接复制代码运行，前提全局安装elementUI这些 <template> <el-row> <el-row> <el-col :span="3"><el-button type=...
vue+element ui搭建的DEMO实现基本增删改查+分页+导出
Ilovelaopo521的专栏
02-19 1108
本人是一位JAVA后端开发人员，这两天研究了一下现在比较火的前端技术VUE，简单做了个DEMO。 vue+element ui搭建的DEMO，实现基本功能 增删改查 分页 导出，数据为模拟数据、模拟接口，项目中依赖包需要自行下载npm install。供初学者参考，源码下载地址https://download.csdn.net/download/Ilovelaopo521/12162072。 ...
vue+vue-resource+elementUI table组件实现增删改查和分页源码
08-30
实现功能：1.表格增删改查 2.表格分页3.excel导入导出
Vue2 实战 基于 Elmenet-UI 的 单页面开发 用户信息增删改查 | 支持分页查询 | 自动登录
希望每天都能进步一点点
07-16 1695
本篇文章以Vue2技术为主，使用 Element-UI 前端框架 开发了一个纯前端的可对用户信息进行增删改查的小案例，用到了 vue-router路由技术，Vuex 存储库技术，适合 Vue2 初学者入门
JDOM增删改查实践详解与案例
在Java开发中，利用JDOM可以方便地实现对XML文档的增删改查操作，即CRUD（Create, Read, Update, Delete）操作。本文将详细讲解使用JDOM实现XML文档的完整CRUD操作的知识点。 首先，要使用JDOM进行操作，需要在项目...
SAP Fiori Elements 扩展实战：UI 层扩展、OData 服务扩展、CDS 视图增强及全流程案例
最新发布
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
05-03 269
UI 层扩展主要关注在不修改标准生成界面的基础上，自定义用户界面元素和交互逻辑。典型需求包括：在现有 Fiori Elements 界面上添加新的字段（如表格列或表单项）、增加自定义按钮并绑定操作、以及通过控制器扩展加入事件处理等。无论在 RAP 还是传统 BOPF 架构下，前端 UI 扩展通常采用 SAPUI5 提供的**扩展点（Extension Points）和控制器扩展（Controller Extension）**机制来安全地插入自定义代码。下面分别说明两种后端架构下 UI 扩展的实现方式。
vue3-element-plus-typescript：基于vue-cli vite + vue3.0 + element-plus + typescript +模拟数据的后台管理系统列表页增删改查功能
02-14
vue3-element-plus-typescript 基于vue-cli / vite + vue3.0 + element-plus +打字稿+ mock数据的后台管理系统列表页增删改查功能 vue-cli版： : vite版： : 系统模块数据是mock数据使用了Vue3.0全家桶，Element-plus和typescript，实践vue3.0的新特性以及vite打包工具，采用的是vue3.0的组成API，体验vue3和typescript以及打包工具vite等 页面功能 列表页 列表页增删改改查 采用vue3 composition api typescript在项目中运用，提供类型检查 模拟数据，支持网络查看 请求接口返回数据用typescript泛型约束 vue3-element-plus-typescript yarn install 编译和热重装以进行开发
vue表格增删改查
03-04
该文件主要以vue.js为主的表格渲染，数据交互。充分的表现了表格的增删改查功能，以及vue中input的使用，date日期的选择。
通过Element开发基础增删改查页面——Vue项目实战(三)
qq_42700766的博客
06-26 431
前端基础增删改查页面
vue element表格的增删改查（细）
有问题可关注公众号：前端研究院 后台输入问题回复
12-18 331
贴上完整的代码和对应图： <template > <div class="hello"> <div class="searchDiv"> <el-col :span="4"> <!-- 查询输入框 --> <el-input v-model="input" placeholder="请输入内容"></el-input> </el-col>
Element-UI（增删改查）
weixin_72997875的博客
10-10 1121
data() {return {// 是否打开弹窗// 弹窗标题title: '新增页面',// 定义数组接收数据book:// 类型types: [],// 输入框长度// 初始化方法clear() {this.title = '新增页面';id: '',price: '',// 编辑if (row) {this.title = '编辑页面';// 增加修改提交//表单验证//验证通过执行增加修改方法//获取后台请求书籍数据的地址。
03 编写登录页面
g759780748的博客
12-23 3032
1 编写最外层div样式，让其html上下左右居中 #login { position: absolute; width: 500px; height: 400px; top: 50%; left: 50%; margin-top: -200px; margin-left: -250px; border: 1px solid red; } 刷新页面看下效果 在elementui官网找一个表单案例 把代码copy到Login.vue中...
vue+element+admin实现增删改查
敲代码无敌小奶龙的博客
10-18 2545
vue+element+admin实现增删改查功能
Vue+elementui实现增删改查
weixin_43811753的博客
07-27 3383
导航实现方案一（缺查询功能）实现方案二(缺查询功能) 实现方案一（缺查询功能） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content=
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值