element-ui表格數據的應用

需求原型
圖片描述
需求:對錶格date一列,每行都添加一個按鈕。點擊對應行的按鈕,能夠獲取對應刷新的數據。展現在當前行。整個表格每過10s自動刷新一次。
後端返回數據:table的data爲後端

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

date的數據this

"date": "2015-6-27"

思路:兩個接口的數據。 一個是整個table 的。 一個是單條記錄的。 單條記錄是合併到 table 裏。
獲取到date的值都存在一個數據裏。在獲取table的數據後, 再遍歷兩個數據。 根據對應的id,合併到值,再渲染到頁面上。 spa

核心代碼:
獲取table表格數據code

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)
 }

單次點擊獲取date的數據接口

this.rbData.forEach(item => {
  if (item.id === row.id) {
    row.date = date
  }
})
let dateData = {
  id: row.id,
  date: date
}
this.dateDatas.push(dateData)
相關文章
相關標籤/搜索