element-ui之el-table的使用合集
關於 element-ui 使用中的其他問題請點這裡
一、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-table 動態生成表頭
el-table 根據後端返回的資料,動態生成表頭並展示相應的值。如後端返回的資料如下:
要求顯示如下:
其中 name, id, salary 用於表頭的label顯示,並通過prop繫結這些資料的值。具體實現如下:
// 處理後端返回的資料data,並定義ruleTableLabel儲存label data.map(item => { Object.keys(item).map(key => { !this.ruleTableLabel.includes(key) && this.ruleTableLabel.push(key) }) }) // 迴圈並繫結prop <el-table-column v-for="(key, i) in ruleTableLabel" :key="i" :label="key" :prop="key"></el-table-column>
七、el-table列使用fixed屬性後,與其他列出現錯位
具體錯誤如下圖所示:
其中操作列設定了固定,初始展示列表頁時沒啥問題,但是從詳情頁返回時就出現了這樣一個錯位,用了doLayout方法也不行。然後查了樣式把 el-table__fixed-body-wrapper 的top值修改成表頭的高度就可以了。
八、el-table-column 新增show-overflow-tooltip 內容超長,滑鼠放上去後一直閃爍
這裡主要是顯示後端返回的日誌資訊,但是因為這個資料比較多,而且使用 show-overflow-tooltip 的列文字內容超長,最小的也有10+kb,然後滑鼠放上去的時候就一直閃動,完整的內容也顯示不出來。具體問題如下圖:
然後用了 el-tooltip 代替 show-overflow-tooltip 這個屬性,具體程式碼如下:
<el-table-column prop="logMsg" label="日誌資訊" align="center"> <template slot-scope="scope"> <el-tooltip effect="light" :content="scope.row.logMsg" popper-class="log-tooltip" :disabled="scope.row.logMsg | ellipsis" placement="top"> <span v-if="scope.row.logMsg.length > 100">{{ scope.row.logMsg.split(0, 100)[0] + '...' }}</span> <span v-else>{{ scope.row.logMsg }}</span> </el-tooltip> </template> </el-table-column>
新增過濾器和樣式:
//新增過濾器 filters: { //如果文字內容長度少於100,就不顯示tooltip元件 ellipsis (value) { if (value.length > 100) { return false } return true } } //並給tooltip元件新增樣式 .log-tooltip.el-tooltip__popper{ max-width: 90%; height: 90%; left: 5%; right: 5%; top: 5%; bottom: 5%; margin: 0 auto; overflow: scroll; }
注意:el-tooltip__popper的樣式如果新增在scoped中是不生效的,因為元素預設是追加在body的。通過popper-class屬性對樣式進行限定,否則其他頁面有用到el-tooltip的樣式會被覆蓋。
九、el-table 帶翻頁的多選
-
-
reserve-selection:僅對 type=selection 的列有效,型別為 Boolean,為 true 則會在資料更新之後保留之前選中的資料。
-
row-key:行資料的 Key,用來優化 Table 的渲染;在使用 reserve-selection 功能與顯示樹形資料時,該屬性是必填的。主要用來表示每行資料是通過哪個屬性來進行區分,一般使用id。
-
selection-change:當選擇項發生變化時會觸發該事件。引數 selection 將是所有頁面已經勾選的資料。
-
<template> <el-card> <el-table :table-loading="loading" :tableData="tableData" ref="tableRef" :row-keys="getRowKeys" @selectionChange="selectionChange"> <el-table-column :reserve-selection="true" type="selection" width="55" /> ... ... </el-table> <com-pagination :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" /> </el-card> </template> <script> export default { name: 'index', data() { return { tableData: [], // 表格資料 pageSizes: [20, 50, 100], total: 0, pageSize: 20, currentPage: 1, loading: false, multipleSelectionIds: [], // 所有選中的資料id集合包含跨分頁資料 getRowKeys(row) { // 獲取row的key值,並返回row.id為每行記錄的唯一標識 return row.id } } }, computed: { // 請求資料列表的引數 queryParams() { return { //...其他引數, page: this.currentPage, limit: this.pageSize } } }, mounted() { this.queryList() }, methods: { queryList() { // 呼叫後端介面,獲取table表格資料 ...... }, // 選中事件:單選或單頁全選 selectionChange(selection) { this.multipleSelectionIds = selection.map(item => item.id) }, // 切換頁碼 handleSizeChange(val) { this.pageSize = val this.queryList() }, // 翻頁 handleCurrentChange(val) { this.currentPage = val this.queryList() } } } </script>
如果是所有資料的全選,新增一個全選的按鈕,在傳參的時候跟後端約定一個全選的標識,因為添加了分頁功能,預設只能從介面獲取到一頁的資料而不是所有的,通過約定的全選標識讓後端處理所有資料的全選。頁面展示的資料是否選中,只需要監聽一下tableData的資料變化,然後通過 this.$refs.table.toggleRowSelection(row, true) 來設定行的選中狀態就可以了。
十、el-table 中 type=selection 的列自定義label文字
<el-table :data="tableData" ref="table" :header-cell-class-name="cellclass" style="width: 100%"/> ... ... </el-table> methods: { cellclass(row){ if(row.columnIndex === 0){ return 'table-selection' } } }
-
使用屬性 label-class-name 給當前列自定義className和樣式
<el-table-column label-class-name="table-selection" type="selection"></el-table-column>
這兩種方法的樣式修改如下:
<style lang="less" scoped> .el-table /deep/.table-selection .cell .el-checkbox__input{ display:none; } .el-table /deep/.table-selection .cell:before{ content: "選擇"; position: relative; } </style>
-
直接修改el-table selection的預設樣式
<style lang="less" scoped> .el-table__header .el-table-column--selection .cell .el-checkbox { display:none; } .el-table__header .el-table-column--selection .cell:before { content: "選擇"; } </style>
-
重寫selection列
<el-table :data="tableData" style="width: 100%"> <el-table-column label="選擇" width="50"> <template slot-scope="scope"> <el-checkbox></el-checkbox> </template> </el-table-column> </el-table>
十一、el-table 資料的簡單篩選過濾
一般涉及到 table 表格資料的篩選過濾,都是通過呼叫後端介面來完成的。
在之前的專案中,有幾個頁面的列表資料,篩選條件只有一個,後端懶得加,就只好自己弄了一個簡單的過濾展示。具體如下:
//this.name過濾條件 tableData列表資料 <el--table :table-loading="loading" ref="table" :tableData="tableData.filter(d => d.name.indexOf(this.name) > -1)"> </el-table>
這種方法如果篩選條件多了就不行了,還是得需要後端處理