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

最新推荐文章于 2024-05-07 08:33:45 发布
最新推荐文章于 2024-05-07 08:33:45 发布
阅读量2.4k 收藏 6
点赞数
文章标签： javascript ui 数据库 ViewUI
原文链接：https://segmentfault.com/a/1190000015330954
版权

在最近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的数据存取更新操作

weixin_33912445
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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 1660
<template> <div class="page-container "> <el-card class="box-card"> <div class="title-wrapper"> <breadcrumb></breadcrumb> <span class="pushButton"> <el-button type="primar.
2024年最全vue el-table实现行内编辑功能_el-table 行内编辑，大厂程序员35岁后的职业出路在哪
最新发布
2401_84616922的博客
05-07 1376
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。
vue + element-ui Table 多页选择数据并记录保存选中的数据
时光从指尖划过的博客
09-18 2400
需求： 开发中我们常常会用到表格的复选框功能，在表格进行翻页或者切换条数时，希望还能记住之前的勾选项。 问题：当我选了第一页的一条数据时，点到第二页，数据就刷新了，第一页选的选项也就没有保存了，所以就只能永远选择一页内的数据。 <el-table ref="multipleTable1" :data="tableData4" tooltip-effect="dark" style="...
项目存档(vue ElementUI vant)
北梦啊的博客
08-13 267
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 1176
【代码】Vue Element Table表格双击单元格进行单元格编辑-学习笔记。
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
10-17
Element UI是基于Vue.js的组件库，提供了丰富的UI元素，包括表格（Table），使得开发者能够轻松创建出美观且功能强大的前端界面。 首先，我们需要引入Vue.js和Element UI的相关库。在HTML头部添加以下链接： ```...
基于Vue+element-ui 的Table二次封装的实现
10-18
在本文中，我们将深入探讨如何基于Vue.js框架和Element-UI库进行Table组件的二次封装。Element-UI是一个流行的UI组件库，它为Vue.js提供了丰富的界面元素，其中包括表格（Table）组件。当我们需要对表格进行定制化...
基于 Vue + Element UI 开发，参考小米商城，实现的电商项目-vue-xiaomi.zip
11-04
【标题】中的“基于 Vue + Element UI 开发，参考小米商城，实现的电商项目”揭示了这个项目的核心技术栈和设计灵感。Vue.js 是一款轻量级、高性能的前端JavaScript框架，它允许开发者构建可复用组件，实现数据驱动...
vue+Element中table表格实现可编辑（select下拉框）
10-15
主要介绍了vue+Element中table表格实现可编辑，实现select下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
(VUE+Element快捷编辑)tableFastEdit.vue
08-31
VUE使用Element UI 表格时,对单个表格进行快速编辑时,需要的便捷组件,而且可以自定义显示的样式
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 单选，多选可编辑当前行内容，并保存更新
weixin_41346436的博客
09-22 2351
需求：基于element-ui的表格，可以单选，且选择以后可以编辑，没有选中是不能编辑的，编辑以后保存数据 效果预览 在使用单选和多选这个组件的时候，还是很容易采坑的 **由于这个案例中的表格字段太多，此处只是列出了一两个，作为参考即可 ** 表单数据中，每一行都有一个可以编辑保存的内容，为el-input的组件，在没有选中的情况下是灰色不可编辑的，选中以后是可以编辑的，因此需要给这个input的框加上:disabled=“scope.row.isWrite” 这样一个动态属性 <template
vue-table-保存方法
weixin_40259093的博客
11-09 859
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-ui中的table表格实现编辑
super帅的博客
05-09 1339
效果图如下 注意我是用的 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 1300
子组件 <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 419
不要贪恋没意义的人和事，拎着垃圾的手怎么腾地出来接礼物。这种情况下分页的话数据也会保存表格是这个样子的 具有复选框的表格el-table 上面的这几个属性必须得有:row-key="getRowKeys" @selection-change="handleSelectionChange" tooltip-effect="dark"data() {return {getRowKeys(row) {r...
Vue实现表格行内编辑保存删除
huafeihuazyr的博客
12-04 1271
https://www.cnblogs.com/weijiutao/p/10956808.html
element ui 的table操作
qq_42628504的博客
01-13 732
element ui table
vue +element ui table 单元格合并代码
04-27
要实现 Element UI Table 单元格的合并，可以使用 Element UI 提供的 `span-method` 属性。具体实现代码如下： ```html <template> <el-table :data="tableData" :span-method="handleSpanMethod"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [{ name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 22, gender: '男' }] } }, methods: { handleSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (rowIndex % 2 === 0) { return { rowspan: 2, colspan: 1 }; } else { return { rowspan: 0, colspan: 0 }; } } } } } </script> ``` 在 `handleSpanMethod` 方法中，我们可以根据当前单元格的行索引和列索引来判断是否需要进行合并，返回一个对象，分别指定行合并数量和列合并数量即可。在上面的例子中，我们实现了将第一列的相邻两行进行合并的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值