vue vue-element-admin專案踩坑小結

giveMe_Five發表於2019-12-24

1.elementui中input繫結change事件,以為可以實現使用者名稱的即時重新整理,但是效果不行,還是要等失去焦點後才會觸發,修改@change替換為@input,可實現即時重新整理。

2.table新增loading效果,修改行樣式

<el-table
        v-loading="dataLoading" // loading控制引數dataLoading 預設false
        :header-cell-style="{background:'#f5f5f5'}"
        :default-sort="{prop: 'date', order: 'descending'}"
        :row-style="changeRowcss" // 修改當行的樣式
        element-loading-background="rgba(0,0,0,0.2)"
        element-loading-text="資料載入中"
        element-loading-spinner="el-icon-loading"
      >
在js中寫
changeRowcss(row) { // 根據返回資料修改table中特定行樣式
      if (row.row.role === 0) {
        return 'color:#999' // 修改有特定屬性的一行中的樣式
      }
    },

3.vue元件每次開啟後的重新整理

使用ref和v-if同時去繫結一個元件,v-if預設為false,在關閉元件的@close 方法回撥中新增 元件狀態引數  設定為false 

4.key值重複的報錯,一般情況都是v-for=“item in obj” 迴圈的時候沒有給item加上索引 這樣 v-for=“(item,index) in obj” :key = index這樣就不會報錯 key值重複了

相關文章