Element-ui使用中遇到的問題總結

element 官方文檔

基於 vue2.0 的 element-ui 框架，使用起來仍是很方便的，很是適合快速開發，可是在作本身的項目中仍是會碰到這樣那樣的問題，有些問題官方文檔並非很詳盡，如下是我在使用 element-ui 過程當中一些經常使用的或碰到的一些問題筆記。

1、DateTimePicker 日期選擇範圍爲當前時間以及當前時間以前

<template>
    <div>
        <el-date-picker size="small" clearable type="daterange" v-model="dateRange"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="開始日期"
            end-placeholder="結束日期"></el-date-picker>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                pickerOptions: {
                    disabledDate (time) {
                        return time.getTime() > Date.now()
                    }
                },
                dateRange: []
            }
        }
    }
</script>

2、DateTimePicker 日期選擇範圍數組的拆分

項目中碰到的需求：type 爲 daterange 的日期選擇器所綁定的值 date 是一個數組，可是後端接收的參數開始日期和結束日期是分開的，回顯時返回的數據也是分開的

建立 arrayUtil.js 文件

// arrayUtil.js
/**
 * @description 安全的獲取數組對應下標數據
 * @param { Array } arr
 * @param { int } index
 */
export const saveGet = (arr, index) => {
    if( arr & Array.isArray(arr)) {
        return arr[index];
    } else {
        return undefined;
    }
}

在 .vue 文件中引入並調用

// .vue 文件
import { saveGet } from './utils/arrayUtil';

<el-date-picker type="daterange" v-model="date" style="width: 100%;" 
    format="yyyy-mm-dd" 
    start-placeholder="開始日期" 
    end-placeholder="結束日期" />

export default {
    data() {
        return {
            date: [] // 日期範圍
        }
    },
    // 計算獲得傳遞給後端的參數(拆分日期範圍數組)
    computed: {
        queryParams() {
            return {
                fromDate: saveGet(this.form.date, 0),
                toDate: saveGet(this.form,date, 1),
                ... ...
            };
        }
    },
}

回顯的時候，後端返回的 fromDate 和 toDate 再拼成數組就能夠了。

3、el-select 選擇器options的value/label採用拼接的方式

<el-select placeholder="請選擇" style="width:100%" filterable v-model="info" clearable >
    <el-option
      v-for="item in infoList"
      :key="info.id"
      :label="`name: ${item.name} - idNo: ${item.idNo}`"
      :value="item.id">
      <span style="float: left">{{ item.tableName }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.level }}</span>
    </el-option>
</el-select>

上述 v-model="info" 是從後端返回的選擇用戶 id，infoList 爲全部用戶的信息，label 拼接了 用戶姓名 - 用戶idNo，回顯時要匹配過濾下而後再拼接顯示就好了。顯示以下：

4、el-table 翻頁序號連續

// 方法一
<el-table-column label="序號" type="index" width="50" align="center">
      <template v-slot="{ $index }">
          <span>{{ $index + pageSize * ( currentPage - 1 ) + 1 }}</span>
      </template>
</el-table-column>

// $index 當前序號  pageSize 每頁顯示的條數  currentPage 當前頁碼

// 方法二
<el-table-column label="序號" type="index" width="50" align="center" :index="tableIndex"/>

// 文檔中index的類型能夠是Function(index)，這裏綁定一個方法，將返回值賦給index, 即該行的索引

...
methods: {
    tableIndex(index) {
        return index + this.pageSize * ( this.currentPage - 1 ) + 1
    }
}

5、el-table el-pagination 分頁頁數從0開始

項目中的需求：後端返回的接口數據是從第0頁開始的，el-pagination 中當前頁數默認是從1開始的，也就是點擊el-pagination的第1頁傳遞給後端的頁數是0，點擊第2頁傳遞1，點擊第3頁傳遞2 ... ...

<el-pagination
    background
    :current-page="currentPage"
    :page-size="pageSize" />
        
export default{
    data() {
        return {
            currentPage: 1, // 當前頁數
            pageSize: 10, // 每頁顯示條目個數
        }
    },
    computed: {
        queryParams () {
            return {
                page: this.currentPage - 1,
                size: this.pageSize
            }
        }
    }
}
// 調用接口的時候把queryParams傳遞過去就能夠了

6、el-table 使用 v-loading 報錯

在項目中按需引入element-ui的時候，使用 el-table 的v-loading 報錯，以下：

github 上也有相關 issues，點這裏查看

解決方法很簡單，在 main.js 中將 loading 引入 use 一下就行了，我是將 element 按需引入的組件單獨抽離出來了，以下圖

7、在 el-table 表格中使用 radio 單選按鈕

項目需求以下圖：

而後要將選中數據 id 傳遞給後端 。具體代碼以下：

<el-table>
     <el-table-column label="選擇">
         <template slot-scope="scope">
              <el-radio v-model="radioStatus" :label="scope.$index" 
　　　　　　　　　　@change.native="getRowSelected(scope.$index, scope.row)"
                  > &nbsp; </el-radio>
        </template>
    </el-table-column>
    ... ...
</el-table>

export defalut {
    data() {
        return {
            radioStatus: false, // 是否被選中，默認都是 false
            selectedId: '' //選中數據的id
        }
    },
    methods: {
        // 獲取選中數據
        getRowSelected(index, row) {
            this.selectedId = row.id 
        }
    }
}

注意：radio 的 label 必定要設爲不一樣的值，不然點擊一個 radio 會選中所有。若是不要顯示 label，經過樣式控制其隱藏就能夠了。

8、el-table 改變單元格某一列的樣式

表格中某一列的數值根據不一樣等級展現不一樣的背景色。具體需求以下：

經過table的cell-style屬性，能夠設置一個固定的 Object 或 Function({row, column, rowIndex, columnIndex})，這裏用了回調的方法。實現代碼以下：

<el-table :data="tableData" style="width: 100%" border :cell-stlye="set_cell_style">
     <el-table-column label="選擇">
         ... ...
    </el-table-column>
</el-table>

... ...
methods: {
    set_cell_style({row, column, rowIndex, columnIndex}) {
        if(row.errorNum > 20 && column.label === '檢測錯誤數') {
            return {  // 返回對象
                background: '#F56C6C', color: 'white'
            }
        } else if(row.errorNum > 10 && column.label === '檢測錯誤數') {
            return {
                  background: '#E6A23C', color: 'white'
            }
        } else if(row.errorNum > 0 && column.label === '檢測錯誤數') {
            return 'background: #67C23A; color: white' // 返回字符串
        }
    }
}
// row 行數據對象  column 列對象
// 上述 column.label === '檢測錯誤數' 等價於 columnIndex === 4
// 用label主要是以避免表格展現順序更換，columnIndex也得相應的更改

注意：使用 function 時 return 的返回值若是是 string 類型，在開發環境是能夠生效的，可是打包上線後失效。因此若是使用 function，要返回 object 類型。

9、el-dialog 父子組件傳值，關閉el-dialog時報錯

二次封裝 el-dialog 時，關閉 dialog 出現以下錯誤

具體代碼以下：

// 父組件
<el-button type="primary" size="mini" @click="dialogVisible=true">新 增</el-button>
<com-dialog :dialogVisible.sync="dialogVisible" @closeDialog="closeDialog"></com-dialog>

// 子組件
<template>
    <el-dialog title="新增" :visible.sync="dialogVisible" @close="closeDialog">
</template>

<script>
export default {
  props: {
      dialogVisible: {
          type: Boolean,
          default: false
      }
  },
  methods:{
      //關閉Dialog
      closeDialog(){
        this.$emit('update:closeDialog', false);
      }
  },
};
</script>

出現錯誤的緣由是：子組件的關閉事件和父組件的關閉事件相沖突了，子組件的 props 屬性要由父組件來控制，不能直接修改 visible 的值。此處的 sync 修飾符至關於 el-dialog 直接修改了父組件的值。因此把父組件和子組件的 .sync 去掉就能夠了。

還有一種方法就是將 close 方法改爲 before-close，具體代碼以下：

// 父組件
<el-button type="primary" size="mini" @click="dialogVisible=true">新 增</el-button>
<com-dialog :dialogVisible.sync="dialogVisible" @closeDialog="closeDialog"></com-dialog>

// 子組件
<template>
    <el-dialog title="新增" :visible.sync="dialogVisible" :before-close="closeDialog">
</template>

<script>
export default {
  props: {
      dialogVisible: {
          type: Boolean,
          default: false
      }
  },
  methods:{
      //關閉Dialog
      closeDialog(){
        this.$emit('closeDialog', false);
      }
  },
};
</script>

以上，還會繼續更新噠 :) ~~