關於 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>
這種方法如果篩選條件多了就不行了，還是得需要后端處理