基於vue + element ui的table編輯,保存和刪除

在最近2年的工做中遇到過幾回很基礎的基於element-ui的table開發,簡單的增刪改查功能,閒下來想整理一下~ 以備後用

vue架子,用最新的vue-cli 3.0,此處(...),能夠參考我以前的almost最好的Vue + Typescript系列01 環境搭建篇

項目基礎構建好之後~

這個小demo咱們暫且將數據存在localStroage,以後我將更新基於sequelize前端操做數據庫的操做

1. 點擊新增按鈕

2. 點擊保存按鈕

點擊保存後,將該條數據寫入localstorage

3. 點擊編輯按鈕
對已經存在的數據進行編輯

4. 點擊刪除按鈕
對已經存在的數據進行刪除

5. 還能夠對當前的數據進行上下調整

基本的增刪改功能就是這樣啦~ 附上github代碼: vue-element-table-edit
歡迎指正.
後期我將陸續更新基於Nodejs ORM框架Sequelize的數據存取更新操做