技術標籤：vue.js

vue+Element-ui中的一些小經驗總結

• vue資料觸發更新機制
• el-input新增鍵盤事件不生效
• 強制物件更新的兩種方法
• 為什麼在mounted()獲取不到data中的資料
• el-table使用v-if後的表頭亂序問題

vue資料觸發更新機制

Vue 是通過渲染來觸發資料的依賴收集的，也就是說，假如 Data 中有某些資料並沒有在模版中使用的話，更新這些資料的時候，是不會觸發更新的。

el-input新增鍵盤事件不生效

element-ui 中的el-input 按照vue官方API新增鍵盤事件不生效，這是因為在el-input 的input外邊封裝了一層div。只要在事件後邊加上.native()就可以了

<el-input placeholder="請輸入內容" @keyup.enter.native="on_filter"></el-input>

強制物件更新的兩種方法

let params = {...}
// 方法一：this.$set()
this.params = params
this.$set(this.params, 'remark', this.dataList.input)
//  方法二：Object.assign()
this.params = Object.assign({}, params)

為什麼在mounted()獲取不到data中的資料

這是因為在mounted()鉤子函式中，this 指向的是window作用域，所以會出現獲取到的data中的資料出現沒有定義的情況。

解決辦法：需要解決 this 的指向問題，便可以重新獲取到data中的資料，如將 this 指定另一個變數，這樣在mounted() 鉤子函式的子函式中，便可以重新獲取到data中的資料。

mounted () {
    let that = this
    ......
  }

el-table使用v-if後的表頭亂序問題

在使用el-table使用v-if控制表格列的顯示和隱藏時，莫名其妙出現表頭順序混亂問題，解決方案如下：
給每一行增加一個key屬性：