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

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

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

项目基础构建好以后~

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

基于vue + element ui的table编辑,保存和删除_第1张图片

1. 点击新增按钮

基于vue + element ui的table编辑,保存和删除_第2张图片

2. 点击保存按钮

基于vue + element ui的table编辑,保存和删除_第3张图片

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

基于vue + element ui的table编辑,保存和删除_第4张图片

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

4. 点击删除按钮
对已经存在的数据进行删除
基于vue + element ui的table编辑,保存和删除_第5张图片

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

基于vue + element ui的table编辑,保存和删除_第6张图片

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

你可能感兴趣的:(element-ui,vue.js,javascript)