Vue實現在當前表格資料複製後可編輯、儲存功能程式碼

阿新 • • 發佈：2018-12-31

export default { name: 'tb', data () { return { items: [{ id: 1, name: 'zhansgan1', hight: '168cm', weight: {id: 1, name: '168kg'}, rank: {id: 1, name: '一級1'}, isClone: false }, { id: 2, name: 'zhansgan2'

, hight: '168cm', weight: {id: 2, name: '167kg'}, rank: {id: 2, name: '一級2'}, isClone: false }, { id: 3, name: 'zhansgan3', hight: '168cm', weight: {id: 3, name: '166kg'}, rank: {id: 3, name: '一級3'}, isClone: false

}], rank: [], weight: { data: [{ id: 1, name: '168kg' }, { id: 2, name: '167kg' }, { id: 3, name: '166kg' }], index: -100, isShow: false } }; }, methods: { // 複製使用者

useclone (id, index) { let arr = this.items.slice(index, index + 1)[0]; // 注意：轉成json再反轉回來，不能直接使用賦值，不然會和複製的一層公用同一個記憶體單元地址，會得到一樣的結果 let obj = JSON.stringify(arr); let newObj = JSON.parse(obj); console.log(newObj); /** 這裡可以對複製的資料進行操作 ***/ newObj.name = ''; // 清空名字 newObj.isClone = true; // 顯示操作按鈕 /** 這裡可以對複製的資料進行操作 ***/ this.items.splice(index + 1, 0, newObj); }, // 選擇體重彈窗 showWeight (id, index) { this.weight.isShow = true; this.weight.index = index; console.log(this.weight); }, // 體重彈窗選擇對應體重 chooseWeight (index, dbIndex) { console.log(this.items[dbIndex]); console.log(this.weight.data[index]); this.items[dbIndex].weight = this.weight.data[index]; }, // 儲存使用者資訊 save (index) { alert(JSON.stringify(this.items[index])); console.log(this.items[index]); }, // 刪除使用者資訊 del (index, userId) { this.items.splice(index, 1); console.log(userId); }, // 阻止冒泡 stopPropa () { let e = event || window.event; e.stopPropagation(); return false; } }, created () { // 初始化rank this.rank = [{ id: 1, name: '一級1' }, { id: 2, name: '一級2' }, { id: 3, name: '一級3' }]; } };

Vue實現在當前表格資料複製後可編輯、儲存功能程式碼

Vue實現在當前表格資料複製後可編輯、儲存功能程式碼

基於Birt4.6實現報表表格數據的可編輯

JS實現動態生成表格並提交表格資料向後端

vue實現對表格數據的增刪改查

VUE-003-前端表格資料展示時，設定單元格（el-table-column）保留空格和換行

vue實現table表格的動態編輯

在python中使用openpyxl和xlrd建立一個新Excel並把原表格資料複製到新表中

c# 模仿 vue 實現 winform 的資料模型雙向繫結

vue實現動態新增資料滾動條自動滾動到底部

IE11 vue +webpack 專案中資料更新後頁面沒有重新整理問題

vue實現星級評價及上傳多張圖片等功能（類似淘寶商品評價頁面）

HTML頁面實現可編輯，儲存，並生成PDF，完成簽章。

Python tkinter Treeview建立GUI表格（可編輯、新建單元格）

Mysql 一條SQL語句實現批量更新資料，update結合case、when和then的使用案例

select2，利用ajax高效查詢大資料列表（可搜尋、可分頁）

讓DIV可編輯、可拖動

C++基礎回顧1——資料型別，變數型別、儲存

關於UEditor外掛的使用以及UEditor資料回顯問題，資料庫儲存標籤程式碼前臺頁面如何解析問題小結

MSSQLServer資料庫大量資料按月份分表、儲存過程指定時間段跨表分頁查詢

SWT雙擊table單元格可編輯、變為下拉框

Vue實現在當前表格資料複製後可編輯、儲存功能程式碼

相關推薦