element-ui表格數(shù)據(jù)的應(yīng)用

simon_chen 發(fā)布于2019-08-22 18:21 / 2696人閱讀

摘要：需求原型需求對表格一列每行都添加一個按鈕。整個表格每過自動刷新一次。后端返回數(shù)據(jù)的為的數(shù)據(jù)思路兩個接口的數(shù)據(jù)。在獲取的數(shù)據(jù)后，再遍歷兩個數(shù)據(jù)。根據(jù)對應(yīng)的，合并到值再渲染到頁面上。核心代碼獲取表格數(shù)據(jù)待刷新單次點(diǎn)擊獲取的數(shù)據(jù)

需求原型

需求：對表格date一列,每行都添加一個按鈕。點(diǎn)擊對應(yīng)行的按鈕，可以獲取對應(yīng)刷新的數(shù)據(jù)。展示在當(dāng)前行。整個表格每過10s自動刷新一次。
后端返回數(shù)據(jù)：table的data為

    "a0": {
        "id": "#1",
        "log": "repair bug1",
    },
    "b2": {
        "id": "#2",
        "log": "repair bug2",
    }

date的數(shù)據(jù)

 "date": "2015-6-27"

思路：兩個接口的數(shù)據(jù)。一個是整個table 的。一個是單條記錄的。單條記錄是合并到 table 里。
獲取到date的值都存在一個數(shù)據(jù)里。在獲取table的數(shù)據(jù)后，再遍歷兩個數(shù)據(jù)。根據(jù)對應(yīng)的id，合并到值,再渲染到頁面上。

核心代碼：
獲取table表格數(shù)據(jù)

 const date = "待刷新"
 for (let i in Datas) {
   let data = {
     id: Datas[i].id,
     log: Datas[i].log,
     date: date
   }
   this.dateDatas.forEach(item => {
     if (item.id === Datas[i].id) {
       data.date = item.date
     }
   })
  this.rbData.push(data)
 }

單次點(diǎn)擊獲取date的數(shù)據(jù)

this.rbData.forEach(item => {
  if (item.id === row.id) {
    row.date = date
  }
})
let dateData = {
  id: row.id,
  date: date
}
this.dateDatas.push(dateData)

GPU云服務(wù)器云服務(wù)器表格應(yīng)用 html表格應(yīng)用基礎(chǔ) 帶數(shù)據(jù)的表格 element-ui

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95771.html

相關(guān)文章

vue封裝element-ui的table組件,靈活配置表頭實(shí)現(xiàn)表格內(nèi)編輯，按鈕，鏈接等功能。

摘要：一封裝的組件定義表格高度全屏增加前臺分頁功能。表格內(nèi)編輯后，自動選中該行。單元格內(nèi)數(shù)據(jù)樣式單元格內(nèi)按鈕，可多個。觸發(fā)組件綁定函數(shù)，參數(shù)按鈕名稱，按鈕樣式，按鈕事件標(biāo)識。單元格是否可點(diǎn)擊的判斷函數(shù)，可進(jìn)行復(fù)雜的函數(shù)判斷。 vue-bxz-table 一、封裝element-ui的table組件：定義表格高度全屏增加前臺分頁功能。自定義表頭，循環(huán)輸出整體表結(jié)構(gòu)。表格內(nèi)編輯（輸入框...

henry14 2019-08-26 13:30 評論0 收藏0
D2 Crud，一款簡單易用的表格組件

摘要：是一套基于和的表格組件。將的功能進(jìn)行了封裝，并增加了表格的增刪改查數(shù)據(jù)校驗(yàn)表格內(nèi)編輯等常用的功能。大部分功能可由配置實(shí)現(xiàn)，在實(shí)現(xiàn)并擴(kuò)展了表格組件功能的同時，降低了開發(fā)難度，減少了代碼量，大大簡化了開發(fā)流程。 D2-Crud 是一套基于Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格組件。D2-Crud 將 Element 的功能進(jìn)行了封裝，并增加了表格的增刪改...

fevin 2019-08-23 11:43 評論0 收藏0
element-ui table表格動態(tài)列合并

摘要：前言的時候沒有表格合并的方法，這當(dāng)時做表格合并的功能時候，非常頭疼。開始官方已經(jīng)支持表格合并的方法，那怎么做到表格動態(tài)合并呢，還是直接看代碼吧。該函數(shù)可以返回一個包含兩個元素的數(shù)組，第一個元素代表，第二個元素代表。前言 element-ui 1.0的時候沒有表格合并的方法，這當(dāng)時做表格合并的功能時候，非常頭疼。2.0開始官方已經(jīng)支持表格合并的方法，那怎么做到表格動態(tài)合并呢，還是直接看...

isLishude 2019-08-23 10:35 評論0 收藏0
vue+element-ui實(shí)現(xiàn)行數(shù)可控的表格輸入

摘要：的中使用包裹想要插入的，或者等元素，綁定一個的數(shù)組對象，在或者等元素使用，為該在綁定數(shù)組對象的對應(yīng)屬性這樣就可以實(shí)現(xiàn)每一行的數(shù)據(jù)分別存儲在綁定數(shù)組對象的不同下標(biāo)數(shù)組中。新增一列時，只需要讓綁定數(shù)組對象一個與先前屬性一致的空對象進(jìn)去。element的table中使用包裹想要插入的input，或者select等HTML元素，綁定一個的數(shù)組對象，在input或者select等HTML元...

番茄西紅柿 2019-04-23 11:47 評論0 收藏0
VUE UI框架對比 element-ui 與 iView

摘要：而則是用到到指令結(jié)合的方式去生成，批量生成元素。表格操作列自定義渲染的時，使用的是的函數(shù)，直接在中插入對應(yīng)模板表格分頁都需要引入分頁組件配合使用兩者總體比較，要比簡潔許多。 element VS iview(最近項(xiàng)目UI框架在選型，做了個分析，不帶有任何利益相關(guān)）主要從以下幾個方面來做對比使用率（npm 平均下載頻率，組件數(shù)量，star, issue…)API風(fēng)格打包優(yōu)化與設(shè)計師友...

ZHAO_ 2019-08-20 17:25 評論0 收藏0