Vue+ElementUI纯前端技术实现对表格数据的增删改查

最新推荐文章于 2025-07-04 22:30:09 发布

原创

最新推荐文章于 2025-07-04 22:30:09 发布 · 9.4k 阅读

87 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html #javascript #java #js

本文详细介绍了如何使用Vue.js和ElementUI构建一个包含增删改查功能的表格页面。主要内容包括页面结构、涉及的技术知识如页面布局、导航、表单等，以及在书写页面结构时的易错点和难点，如组件库的引入、数据绑定和事件处理。此外，还提供了完整的代码示例。

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

页面展示效果

在这里插入图片描述

一、页面结构

分为三个部分 head body 以及script

一般我个人是在head中引入一些组件库 , 还有一些样式 ; style 也可以定义在其中, 通过id选择器 ,还有类选择器进行定义

script 标签体中引入的是一些常见的组件库

LIink 标签体中引入的是一些CSS样式

body中一般是书写页面的结构 , 也就是定义一个DIV , 然后在其中书写书写页面中的各种元素

最后就是script 这里首先通过ID选中DIV , new Vue({ }); 通过el 选中id , data 中书写需要的数据 , methods 里面书写函数方法 , 也就是各种事件

下面是一些简单的html结构 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--这是引入的组件库-->
    <script src="js/vue.js"></script>

    <!--这是引入的样式-->
    <link rel="stylesheet" href="fonts/element-icons.ttf">

</head>
<body>
    <!--这里一般书写页面的结构-->
<div id="app">
    <h1>我是首页中的标题</h1>
    <button @click="dianji">点点我</button>
</div>
</body>

<script>
    new Vue({
        el:"#app",
        data:{

        },
        methods:{
            dianji:function (index) {
               alert('如果不是为了装逼 ,那么一切将毫无意义!');

            }
        }
    });
</script>
</html>

二、涉及到的技术知识

1、页面布局

<div id="one" align="center">              </div>

2、导航菜单

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" align="center">

//这是子菜单选项
<el-menu-item index="1"><font color="#000000">首页</font></el-menu-item>
</el-menu>

3、表单

<el-form align="center">    </el-form>

4、Button按钮

<el-button type="primary" @click.native.prevent="update" :loading="addLoading">确定</el-button>

5、Pagination分页

<el-pagination layout="prev,pager,next" :total="50">                  </el-pagination>

6、弹框

<el-dialog title="编辑" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" append-to-body="true">

</el-dialog>

7、V-model 展示数据

  <el-input v-model="form.id" autocomplete="off"></el-input>

8、表格中展示数据

table 中展示的数组中的整体数据用的是:data

column展示的每一个集合中某一点属性用的是prop

<el-table :data="newsList" style="width:100%"  align="center">
    <el-table-column prop="id" label="公司代号" width="180"></el-table-column>
</el-table>

9、最难点

按钮的功能是最难实现的部分 ,  就是一些事件执行的函数功能 , 也就是一些算法 ;
这一部分在第五大项集中进行讲解

三、如何去书写一个页面结构

首先 , 最外层肯定是一个DIV , 然后DIV中去书写一个el -form , 然后用el-row去分很多行 , 每一行中去书写自己需要的内容 ,可以是图片 , 也可以是按钮 , 也可以是一段文字 ,然后呢书写结构以后 ,样式事件 , 都是在标签体中去进行定义 ;

四、易错点

1、首先必须引入组件库 , 以及常用的样式

你创建一个文件夹 ,然后把这些后缀名为js css的文件给导入进去

2、你的html页面必须直接创建在根目录文件下 ,不要自己手动创建一个文件夹 ,然后在里面进行书写 ,不然你的组建组不起作用

3、弹框也是非常的费劲

五、难点

最难的点永远都是算法的知识 , 这一部分知识你会就是会 ,不会给你再多时间也没用 , 就是增加、删除、修改、查询几个按钮功能的实现

1、弹框部分

1.1 这一段是就是 ,就是你执行按钮操作之前出现的提示信息 , 就是相当于询问你是否确定这样做

记住关键字this.$confirm就行,格式自己复制粘贴就行

this.$confirm('确认进行添加','是否继续?','提示',{
    confirmButtonText:'确定',
    confirmButtonText:'取消',
}

1.2 下面这一段是操作完成之后的提示信息 ; 提示你是执行成功了还是没有

记住关键字this.$message就行 ,格式自己复制粘贴就行

this.$message({
    type: 'success',
    message:'添加成功',
})

1.3 这是编辑的弹框部分

<el-dialog title="编辑" :visible.sync="dialogFormVisible" width="30%" :before-close="handleClose" append-to-body="true">
    <!--这就是一个表格-->
    <el-form :model="form" >
        <!--公司ID-->
        <el-form-item label="公司ID">
            <el-input v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>
        <!--公司名称-->
        <el-form-item label="公司名称">
            <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <!--公司地址-->
        <el-form-item label="公司地址">
            <el-input v-model="form.adress" autocomplete="off"></el-input>
        </el-form-item>
    &l