vue简单实现增删改查

于 2024-05-19 23:48:54 发布
阅读量210 收藏
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62154336/article/details/139050291
版权

1.定义页面的结构

使用了Element UI的el-form表单、el-table表格、el-input输入框以及el-button按钮等组件。这些组件可以像普通HTML元素一样使用，并且可以通过v-model指令进行双向数据绑定。其中如果需要为 元素的属性动态绑定属性值 ，则需要用到 v-bind 属性绑定指令，英文简写为：

源代码如下：

<template>
  <div class="mod-product">
    <el-form :inline="true" :model="formInline" @keyup.enter.native="search()">
      <el-form-item>
        <el-input v-model="formInline.name" placeholder="产品名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()">查询</el-button>
        <el-button
          v-if="isAuth('product:product:save')"
          type="primary"
          @click="addOrUpdateHandle()"
          >新增</el-button
        >
        <el-button
          v-if="isAuth('product:product:delete')"
          type="danger"
          @click="deleteHandle()"
          :disabled="dataListSelections.length <= 0"
          >批量删除</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50"
      >
      </el-table-column>
      <el-table-column
        prop="id"
        label="ID"
        header-align="center"
        align="center"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="dateAdded"
        label="日期"
        header-align="center"
        align="center"
        width="250"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="产品名称"
        header-align="center"
        align="center"
        width="250"
      >
      </el-table-column>
      <el-table-column
        prop="price"
        label="产品价格"
        header-align="center"
        align="center"
        width="250"
      >
      </el-table-column>
      <el-table-column
        prop="available"
        label="产品是否可用"
        header-align="center"
        align="center"
        width="250"
      >
        <template slot-scope="scope">
          <!-- el-tag> 组件，用于显示用户状态 -->
          <el-tag
            v-if="scope.row.available === false"
            size="small"
            type="danger"
            >false</el-tag
          >
          <el-tag v-else size="small">true</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="stock"
        align="center"
        header-align="center"
        label="产品库存数量"
        width="250"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        label="操作"
        >update
        <!-- 自定义表格中每一行的操作按钮 -->
        <template slot-scope="scope">
          <el-button
            v-if="isAuth('product:product:update')"
            type="text"
            size="small"
            @click="addOrUpdateHandle(scope.row.id)"
            >修改</el-button
          >
          <el-button
            v-if="isAuth('product:product:delete')"
            type="text"
            size="small"
            @click="deleteHandle(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
    ></add-or-update>
  </div>
</template>

2.处理交互行为

脚本(script)是Vue.js组件的另一个核心部分，它负责处理组件的业务逻辑和数据。在脚本中，我们可以定义组件的属性、方法、生命周期钩子函数等。

在<script>标签中，我们通常会编写JavaScript代码，其中必须包含一个export default对象，用于导出了一个包含了组件的数据、方法等配置的对象，使得其他组件或文件可以引入并使用这个组件。这个对象中一般要有methods：一个对象，用于定义组件的方法，data（）：用于定义组件的数据。

源代码如下：

<script>
import AddOrUpdate from "./product-add-or-update";
export default {
  data() {
    return {
      formInline: {
        name: "",
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      //dataListLoading：一个布尔值，表示数据列表是否正在加载中，初始值为 false
      dataListLoading: false,
      //dataListSelections：一个数组，用于存储数据列表中被选中的条目，初始值为空数组
      dataListSelections: [],
      //一个布尔值，表示添加或更新操作的模态框是否可见，初始值为 false。
      addOrUpdateVisible: false,
    };
  },
  components: {
    AddOrUpdate,
  },
  activated() {
    this.getDataList();
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    // 查询
    search() {
      this.pageIndex = 1;
      this.getDataList();
    },
    //新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      //
      this.$nextTick(() => {
        //
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/product/product/list"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          name: this.formInline.name,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      // val 就是用户选择的新的分页大小
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    //在用户改变当前页码时，重新获取对应页的数据并更新界面
    currentChangeHandle(val) {
      //将 pageIndex 设置为新的页码 val
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      //这里的 val 应该是用户选择的新的数据项的集合
      this.dataListSelections = val;
    },
    //删除
    deleteHandle(id) {
      var userIds = id
        ? [id]
        : this.dataListSelections.map((item) => {
            return item.id;
          });
      this.$confirm(
        `确定对[id=${userIds.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/product/product/delete"),
            method: "post",
            data: this.$http.adornData(userIds, false),
          }).then(({ data }) => {
            //这个条件语句检查 data 对象是否存在，并且其中的 code 字段是否为 0。
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  //this.getDataList();
                  this.currentChangeHandle();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>

枫烨852
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue实现增删改查功能
weixin_61443360的博客
06-26 880
它调用`reset`方法来重置表单数据，然后调用名为`getCity`的API接口来获取指定城市的详细信息。- `getList`：此方法用于查询城市列表数据。它调用`resetForm`方法来重置查询表单，然后调用`handleQuery`方法来查询城市列表数据。- `handleQuery`：此方法用于搜索城市列表数据。它将页码重置为1，然后调用`getList`方法来查询城市列表数据。- `cancel`：此方法用于关闭添加或修改城市对话框，并重置表单数据。
基于SpringBoot+Vue实现增删改查和分页查询DEMO（源码+数据库)
04-17
springboot项目,基于SpringBoot+Vue实现增删改查分页DEMO（源码+数据库) 技术栈 数据库：MySQL 后端框架：SpringBoot+Spring Data JPA 前端框架：Vue-ElementUI
vue表格增删改查
03-04
该文件主要以vue.js为主的表格渲染，数据交互。充分的表现了表格的增删改查功能，以及vue中input的使用，date日期的选择。
vue实现表格增删改查效果的实例代码
08-29
本篇文章主要介绍了vue实现增删改查效果的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue实现的增删改查
12-03
Vue的增删改查，没什么好说的，参考参考就行了，重在理解，包含了部分模糊查，需要的就看看吧，大佬勿喷，小白出道
vue项目的增删改查，表单验证
qq_62797382的博客
07-28 883
最终的 BookList.vue。
VUE实现增删改查功能
最新发布
忧郁的蛋的专栏
04-08 769
​ 在 vue.js 中实现增删改查功能：创建：使用 v-model 绑定数据，向服务器发送 post 请求创建新记录。读取：向服务器发送 get 请求获取数据。更新：使用 v-model 编辑数据，向服务器发送 put 请求更新记录。删除：向服务器发送 delete 请求删除记录。
vue中实现增删改查
iygxv
11-20 1万+
vue中实现增删改查 一个正在努力爱好运动的程序猿座右铭：越努力越幸运，越运动越健康，热爱编程，热爱运动。 文章目录vue中实现增删改查一、增（添加）二、删（删除）三、改（修改）四、查（查找） 一、增（添加） //1.push();从末尾开始添加 //2.unshift();//从第一位开始添加元素 二、删（删除） //1.splice（删除的索引，删除的个数）； 例如splice（1,1）； //2.filter方法 arr.filter((v，i)=>{return i!=index}
Vue实现增删改查
weixin_46066111的博客
01-10 633
1、引入vue.js 本案例使用了bootstrap框架。4、vue实例，定义数组，进行全局查询。3、模态框显示，点击修改之后弹出。2、视图层展示，点击添加。
用vue实现增删改查
m0_64344470的博客
05-08 2808
1、some(回调函数（item，index）) ⽅法测试数组中是不是⾄少有1个元素通过了被提供的函数测 试。3、 splice() ⽅法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被 修改的内容。此⽅法会改变原数组。2、find() ⽅法返回数组中满⾜提供的测试函数的第⼀个元素的值。6、indexOf()⽅法返回在数组中可以找到⼀个给定元素的第⼀个索引，如果不存在，则返回-1。5、 filter() ⽅法创建⼀个新数组, 其包含通过所提供函数实现的测试的所有元素。
Vue对数据的增删改
weixin_47174945的博客
09-26 636
Vue对数据的增删改 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table
vue实现表格数据的增删改查
08-30
主要为大家详细介绍了vue实现表格数据的增删改查，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
springboot+vue+element增删改查Demo
05-24
springboot+vue+element增删改查Demo 集成了： 1. ​ restful接口定义 2. ​ 增删改查定义，路径参数定义 3. ​ 跨域处理 4. ​ 参数校验 5. ​ 异常拦截 6. ​ swagger文档 7. ​ 测试用例 8. ​ logback...
vue增删改查的简单操作
12-10
本文为大家分享了vue增删改查的简单操作，供大家参考，具体内容如下 我们把这些用户信息保存到list的数组中，然后增删改查就在这个数组上进行： list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男'...
vue文件源代码增删改查
07-27
在这个"vue文件源代码增删改查"的主题中，我们将深入探讨如何在Vue.js项目中实现CRUD（创建、读取、更新和删除）操作，结合SpringBoot后端服务和数据库交互。 首先，让我们从Vue.js的角度出发。在Vue应用中，CRUD...
vue的增删改查
11-19
在Web开发中，"增删改查"（CRUD）是基本操作，对于任何数据驱动的应用来说都是核心功能。Vue.js 提供了丰富的特性来支持这些操作，使得在Vue项目中实现CRUD变得简单高效。 1. **创建（Create）**： 在Vue中创建新...
vue实现增删改查（内附源代码）
热门推荐
weixin_43939158的博客
11-21 1万+
VUE+Element实现增删改查 目录VUE+Element实现增删改查前言实验步骤总结：源代码 前言 &最近因为一些原因，没有更博客，昨天老师布置了一个作业，用vue实现增删改查功能，想想这也不难，就做一下试试吧。 因为自己写的样式没有别人做的好，因此我想用现成的UI框架，一直也没用过Element，就干脆趁机学一下吧。 实验步骤 首先引入一下element的css以及js <!-- 引入样式 --> <link rel="stylesheet" href="htt
Vue 实现表单的增删改查功能及表单的验证
m0_73647713的博客
09-28 1221
Vue 实现表单的增删改查功能及表单的验证 规则编写规则注意快速开发：Element框架提供了丰富的组件和样式库，可以快速构建漂亮、一致的界面。开发人员无需从头开始编写每个组件的样式和交互逻辑，大大节省了开发时间。 响应式设计：Element框架支持响应式布局，自动适应不同的屏幕尺寸和设备类型。这意味着你的应用程序可以在桌面、平板和移动设备上以一致的方式运行，提供更好的用户体验。 可定制性：尽管Element框架提供了一套美观的默 具体代码：BookList.vueaction.js案例效果展示：
vue3 实现增删改查
10-21
Vue3可以通过组合API和Composition API来实现增删改查功能。下面是一个简单的例子： 1. 首先在组件中定义数据和方法： ``` <template> <div> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item, index) in list" :key="index"> <td>{{ item.name }}</td> <td>{{ item.age }}</td> <td> <button @click="edit(index)">编辑</button> <button @click="del(index)">删除</button> </td> </tr> </tbody> </table> <form @submit.prevent="submit"> <input type="text" v-model="formData.name" placeholder="姓名"> <input type="text" v-model="formData.age" placeholder="年龄"> <button type="submit">提交</button> </form> </div> </template> <script> import { reactive } from 'vue' export default { setup() { const list = reactive([ { name: '张三', age: 18 }, { name: '李四', age: 20 }, { name: '王五', age: 22 } ]) const formData = reactive({ name: '', age: '' }) const editIndex = reactive(-1) const submit = () => { if (editIndex.value === -1) { list.push(formData) } else { list[editIndex.value] = formData editIndex.value = -1 } formData.name = '' formData.age = '' } const edit = (index) => { formData.name = list[index].name formData.age = list[index].age editIndex.value = index } const del = (index) => { list.splice(index, 1) } return { list, formData, submit, edit, del } } } ``` 2. 在模板中使用数据和方法： ``` <template> <div> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item, index) in list" :key="index"> <td>{{ item.name }}</td> <td>{{ item.age }}</td> <td> <button @click="edit(index)">编辑</button> <button @click="del(index)">删除</button> </td> </tr> </tbody> </table> <form @submit.prevent="submit"> <input type="text" v-model="formData.name" placeholder="姓名"> <input type="text" v-model="formData.age" placeholder="年龄"> <button type="submit">提交</button> </form> </div> </template> ``` 3. 最后，你可以在组件中使用这些方法和数据来实现增删改查功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值