基于vue + element ui的table编辑,保存和删除

最新推荐文章于 2025-07-31 17:42:27 发布
转载 最新推荐文章于 2025-07-31 17:42:27 发布 · 2.4k 阅读 · 6 ·
CC 4.0 BY-SA版权
原文链接：https://segmentfault.com/a/1190000015330954
文章标签：

#javascript #ui #数据库 #ViewUI

本文介绍了一个基于Element UI的表格编辑示例，使用Vue.js实现基本的增删改查功能，并将数据存储在localStorage中。此外，还预告了后续将介绍使用Sequelize进行数据库操作的内容。

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

在最近2年的工作中遇到过几次很基础的基于element-ui的table开发,简单的增删改查功能,闲下来想整理一下~ 以备后用

vue架子,用最新的vue-cli 3.0,此处(...),可以参考我之前的almost最好的Vue + Typescript系列01 环境搭建篇

项目基础构建好以后~

这个小demo我们暂且将数据存在localStroage,之后我将更新基于sequelize前端操作数据库的操作

clipboard.png

1. 点击新增按钮

clipboard.png

2. 点击保存按钮

clipboard.png

点击保存后,将该条数据写入localstorage

clipboard.png

3. 点击编辑按钮
对已经存在的数据进行编辑

4. 点击删除按钮
对已经存在的数据进行删除
clipboard.png

5. 还可以对当前的数据进行上下调整

clipboard.png

基本的增删改功能就是这样啦~ 附上github代码: vue-element-table-edit
欢迎指正.
后期我将陆续更新基于Nodejs ORM框架Sequelize的数据存取更新操作

Vue+Element-ui 单选，多选可编辑当前行内容，并保存更新
weixin_41346436的博客
09-22 2497
需求：基于element-ui的表格，可以单选，且选择以后可以编辑，没有选中是不能编辑的，编辑以后保存数据 效果预览 在使用单选和多选这个组件的时候，还是很容易采坑的 **由于这个案例中的表格字段太多，此处只是列出了一两个，作为参考即可 ** 表单数据中，每一行都有一个可以编辑保存的内容，为el-input的组件，在没有选中的情况下是灰色不可编辑的，选中以后是可以编辑的，因此需要给这个input的框加上:disabled=“scope.row.isWrite” 这样一个动态属性 <template
vue-table-保存方法
weixin_40259093的博客
11-09 971
table保存方法一 vm.detailList = []; var str = “gatheringId=” + vm.data.gatheringId; $.each(vm.detailList, function (index, formData) { $.each(formData, function (name, value) { str += “&” + “foreignGatheringRecList” + “[” + index + “].” + name + “=” + value
vue-element-table-edit:基于vue和element ui的table,在table内部进行每条数据编辑保存和删除 https
05-12
vue-element-table-edit 基于vue和element ui的table,在table内部进行每条数据编辑保存和删除
element+vue 之Table里的编辑保存取消操作
Jasmin博客
02-15 1887
<template> <div class="page-container "> <el-card class="box-card"> <div class="title-wrapper"> <breadcrumb></breadcrumb> <span class="pushButton"> <el-button type="primar.
vue + element-ui Table 多页选择数据并记录保存选中的数据
时光从指尖划过的博客
09-18 2560
需求： 开发中我们常常会用到表格的复选框功能，在表格进行翻页或者切换条数时，希望还能记住之前的勾选项。 问题：当我选了第一页的一条数据时，点到第二页，数据就刷新了，第一页选的选项也就没有保存了，所以就只能永远选择一页内的数据。 <el-table ref="multipleTable1" :data="tableData4" tooltip-effect="dark" style="...
项目存档(vue ElementUI vant)
北梦啊的博客
08-13 318
js 等待后执行 this.$nextTick(function() { this.fun() }) 路由问题 子路由 { path: "/", name: "index", redirect: "/signActive",//重定位 component: () => import (/* webpackChunkName: "home" */ "@/components/PC/PCtotal/"), children:[ {
Vue Element Table表格双击单元格进行单元格编辑-学习笔记
pon的博客
08-29 1440
【代码】Vue Element Table表格双击单元格进行单元格编辑-学习笔记。
基于 Vue + Element UI 开发，参考小米商城，实现的电商项目-vue-xiaomi.zip
11-04
【标题】中的“基于 Vue + Element UI 开发，参考小米商城，实现的电商项目”揭示了这个项目的核心技术栈和设计灵感。Vue.js 是一款轻量级、高性能的前端JavaScript框架，它允许开发者构建可复用组件，实现数据驱动...
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
10-17
Element UI是基于Vue.js的组件库，提供了丰富的UI元素，包括表格（Table），使得开发者能够轻松创建出美观且功能强大的前端界面。 首先，我们需要引入Vue.js和Element UI的相关库。在HTML头部添加以下链接： ```...
vue+element-ui实现表格编辑的三种实现方式
10-17
本文介绍了使用vue与element-ui实现表格编辑的三种不同方式，具体包括表格内部显示和编辑切换、通过弹出另外的表格进行编辑，以及直接通过样式控制实现编辑功能。以下分别对这三种实现方式进行详细的阐述。 ### ...
基于Vue+element-ui 的Table二次封装的实现
10-18
在本文中，我们将深入探讨如何基于Vue.js框架和Element-UI库进行Table组件的二次封装。Element-UI是一个流行的UI组件库，它为Vue.js提供了丰富的界面元素，其中包括表格（Table）组件。当我们需要对表格进行定制化...
Vue 实现 html 表格 (grid) 单元格编辑功能
yxp 的博客
02-09 3475
这里写自定义目录标题Vue 实现表格单元格的原位编辑起初功能问题期待天降大神前来解救。 Vue 实现表格单元格的原位编辑 这里是 Vue 初学者的笔记，老鸟请回避。如果你是热心的前辈，热切期盼您留下宝贵的意见。 起初 有一个小需求，我希望通过浏览器读入 excel 文件，并可以在网页上修改数据，查了一些 grid 编辑的 JS 插件，真是多如牛毛，导致了我的选择困难症发作。而为了编辑几个简单的数据，专门引入插件似乎有点不划算，我决定自己写。花一个小时认真阅读 Vue 介绍后开始动手码砖，成功如下： 功能
(VUE+Element快捷编辑)tableFastEdit.vue
08-31
VUE使用Element UI 表格时,对单个表格进行快速编辑时,需要的便捷组件,而且可以自定义显示的样式
vue vxe-table :edit-config=“editConfig“ 可以编辑的表格
最新发布
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
07-31 912
vue 的表格table可以编辑，可以使用插件vxe-table。表格的可编辑状态分为行编辑、单元格编辑。需要配置表格的:edit-config属性，属性值是一个对象，可自行配置各种参数和参数值。
Vue可编辑表格的实现——单元格编辑表格
热门推荐
qq_40547061的博客
05-22 1万+
一.准备阶段 1.在views中创建table实例页并配置路由 <template> <div> </div> </template> <script> import { getTableData } from '@/api/data' export default { data () { return { tableData: [], columns: [ { key: 'name',
如何在vue和element-ui中的table表格实现编辑
super帅的博客
05-09 1410
效果图如下 注意我是用的 dialog 弹窗 写的，大家C过去 记得写控制显示隐藏的visible 属性 <template> <el-dialog title="发送邮件" :visible="transmitshow" width="60%" :before-close="handleClose"> <el-button icon="el-icon-plus" circle type="primary"></el-button>.
vue+typescript Table 动态编辑表格
m0_45043105的博客
07-28 1434
子组件 <template> <section class="ces-table-page"> <!-- 数据表格 --> <section class="ces-table"> <el-table :data="tableData" :size="size" :border="isBorder" @select="select" @selec
elementui表格复制_element-ui表格全选数据保存 完美解决
weixin_31785177的博客
01-16 476
不要贪恋没意义的人和事，拎着垃圾的手怎么腾地出来接礼物。这种情况下分页的话数据也会保存表格是这个样子的 具有复选框的表格el-table 上面的这几个属性必须得有:row-key="getRowKeys" @selection-change="handleSelectionChange" tooltip-effect="dark"data() {return {getRowKeys(row) {r...
Vue实现表格行内编辑保存删除
huafeihuazyr的博客
12-04 1330
https://www.cnblogs.com/weijiutao/p/10956808.html
Vue+element-ui Table二次封装实践详解
"本文将介绍如何在Vue.js项目中对element-ui的Table组件进行二次封装，以实现更灵活、统一的表格样式和功能。通过封装，可以提高代码复用率，简化开发流程。作者分享了自己的实践过程，包括封装的原因、实现步骤及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值