Element-ui使用中遇到的問題總結
基於 vue2.0 的 element-ui 框架，使用起來還是很方便的，非常適合快速開發，但是在做自己的專案中還是會碰到這樣那樣的問題，有些問題官方文件並不是很詳盡，以下是我在使用 element-ui 過程中一些常用的或碰到的一些問題筆記。
一、DateTimePicker 日期選擇範圍為當前時間以及當前時間之前
<template>
<div>
<el-date-picker
size="small"
clearable
:picker 二、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" value-format="yyyy-mm-dd" format="yyyy-mm-dd" start-placeholder="開始日期" end-placeholder="結束日期" style="width: 100%;"></el-date-picker> export default { data() { return { date: [] // 日期範圍 } }, // 計算得到傳遞給後端的引數(拆分日期範圍陣列) computed: { queryParams() { return { ... ... fromDate: saveGet(this.form.date, 0), toDate: saveGet(this.form,date, 1), ... ... }; } }, }
回顯的時候，後端返回的 fromDate 和 toDate 再拼成陣列就可以了。
三、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，回顯時要匹配過濾下然後再拼接顯示就行了。
顯示如下：
四、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" :index="tableIndex" align="center" /> // 文件中index的型別可以是Function(index)，這裡繫結一個方法，將返回值賦給index, 即該行的索引 ... methods: { tableIndex(index) { return index + this.pageSize * ( this.currentPage - 1 ) + 1 } }
五、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傳遞過去就可以了
五、el-table 使用 v-loading 報錯
在專案中按需引入element-ui的時候，使用 el-table 的v-loading 報錯，如下：
github 上也有相關 issues，
解決方法很簡單，在 main.js 中將 loading 引入 use 一下就好了，我是將 element 按需引入的元件單獨抽離出來了，如下圖
六、在 el-table 表格中使用 radio 單選按鈕
專案需求如下圖：
然後要將選中資料 id 傳遞給後端 。具體程式碼如下：
<el-table>
<el-table-column label="選擇">
<template slot-scope="scope">
<el-radio :label="scope.$index" v-model="radioStatus"
@change.native="getRowSelected(scope.$index, scope.row)"> </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，通過樣式控制其隱藏就可以了。
七、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 型別。
八、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>
以上，還會繼續更新噠 :) ~~