技術標籤：Vuevue

資料發生變化頁面跟著改變

• • • • 任務
      • 程式碼
      • 效果
      • 推薦

任務

點選檢視  彈出讀頭框，獲取資料，然後拿著資料的裝置id請求介面查詢門鎖狀態，請求時表格顯示載入中，請求結束根據資料顯示對應狀態。

程式碼

 <el-table-column
   label="門鎖狀態"
   :render-header="renderHeader">
   <template slot-scope="scope">
     <div v-if="scope.row.state"
 
> 
       <span v-if="scope.row.state === '0'"> 關閉 </span>
       <span v-else-if="scope.row.state === '1'"> 開啟 </span>
       <span v-else> 獲取失敗 </span>
     </div>
     <el-button v-else :loading="true" style="border: none; background-color: transparent; outline: none"
 
>載入中</el-button>
   </template>
 </el-table-column>




methods: {
  getTableData () {
    queryDoorByDoorNo(parma).then(res => {
      this.tableData = res.data
      this.Id = res.Id   // 裝置id
      this.getLockStatus()
    }
  },
  getLockStatus () {
    doorDevStatus({maindevId:
 
 this.Id}).then(res => {
      // 門鎖狀態
      this.lockStateList = res.lockStateList
    }
  }
},

// 監聽 當門鎖狀態有資料時 把狀態資料新增進表格資料
watch: {
  lockStateList: {
    handler (newVal) {
      this.$nextTick(() => {
        // 由於門鎖狀態的順序和表格資料不一致 需要迴圈判斷進行新增
        for (let i = 0; i < this.tableData .length; i++) {
          this.lockStateList.map(item => {
            if (item.subDeviceId === this.tableData [i].subDeviceId) {
              this.$set(this.tableData [i], 'state', item.state)
            }
          })
        }
      })
    },
    deep: true
  }
}

效果

參考以下兩篇文章

this.$set

this.$nextTick

推薦

部落格導讀目錄