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

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

页面展示效果

在这里插入图片描述

一、页面结构

分为三个部分 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>
    </el-form>

    <!--确定, 取消  按钮-->
   
  • 21
    点赞
  • 87
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
首先,我们需要安装 `vue` 和 `element-ui`。 ```bash npm install vue element-ui --save ``` 然后,我们在 `main.js` 文件引入并使用它们: ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import App from './App.vue' Vue.use(ElementUI) new Vue({ el: '#app', render: h => h(App) }) ``` 接下来,我们在 `App.vue` 文件实现表格增删改查功能。 ```vue <template> <div> <el-input v-model="searchText" placeholder="请输入搜索关键字"></el-input> <el-button type="primary" @click="handleAdd">添加</el-button> <el-table :data="tableData" style="width: 100%"> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="年龄" prop="age"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button type="text" @click="handleDelete(scope.$index)">删除</el-button> </template> </el-table-column> </el-table> <el-dialog :visible.sync="dialogVisible" title="添加/编辑"> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="form.age"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="handleSubmit">确定</el-button> </div> </el-dialog> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18 }, { name: '李四', age: 20 }, { name: '王五', age: 22 }, ], searchText: '', dialogVisible: false, form: { name: '', age: 0, }, rules: { name: [{ required: true, message: '请输入姓名', trigger: 'blur' }], age: [{ required: true, message: '请输入年龄', trigger: 'blur' }], }, editIndex: -1, } }, methods: { handleAdd() { this.form.name = '' this.form.age = 0 this.dialogVisible = true this.editIndex = -1 }, handleEdit(index, row) { this.form.name = row.name this.form.age = row.age this.dialogVisible = true this.editIndex = index }, handleSubmit() { this.$refs.form.validate(valid => { if (valid) { if (this.editIndex === -1) { this.tableData.push({ name: this.form.name, age: this.form.age }) } else { this.tableData.splice(this.editIndex, 1, { name: this.form.name, age: this.form.age }) } this.dialogVisible = false } }) }, handleDelete(index) { this.tableData.splice(index, 1) }, }, computed: { filteredData() { return this.tableData.filter(item => item.name.indexOf(this.searchText) !== -1) }, }, } </script> ``` 在上面的代码,我们使用了 `el-table` 组件来展示数据,并用 `el-table-column` 组件来定义表格列。`el-dialog` 组件用于添加和编辑数据。我们用 `el-input` 组件来实现输入框,用 `el-button` 组件来实现按钮。 表格数据使用了 `tableData` 数组来存储,可以通过 `filteredData` 计算属性来实现搜索过滤。 添加和编辑数据时,我们使用了表单验证和表单重置。可以通过 `el-form` 组件来实现表单验证,用 `el-form-item` 组件来定义表单项。用 `ref` 属性来引用表单实例,用 `$refs` 来获取表单实例。 最后,我们可以通过 `handleAdd`、`handleEdit`、`handleSubmit` 和 `handleDelete` 方法来实现增删改功能。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值