CSS
表格表頭樣式
- html
<el-table :header-cell-style="getRowClass"></el-table>
- js
// 設(shè)置表格第一行的顏色
getRowClass ({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return 'background:#2A3253'
} else {
return ''
}
},
https://blog.csdn.net/Feast_aw/article/details/80777577
表格默認(rèn)hover背景顏色
.el-table__body tr:hover>td {
background: #1b223e !important;
}
https://segmentfault.com/q/1010000012532291?sort=created
https://blog.csdn.net/qq_39313596/article/details/83015358
表格設(shè)置頭部第一行的背景顏色
https://blog.csdn.net/Feast_aw/article/details/80777577
表格點擊一行让簿，背景色變化
https://blog.csdn.net/zhongmei121/article/details/81560134
表格高度自適應(yīng)
https://segmentfault.com/q/1010000013671400
表格寬度自適應(yīng)
- 百分比顯示列
<el-table style="width: 100%;">
<el-table-column min-width="25%"></el-table-column>
</el-table>
表格行高 （row-style)
<el-table :row-style="rowStyle"></el-table>
data () {
return {
rowStyle: {maxHeight: 57 + 'px', height: 57 + 'px'},
}
}
注意：不能直接寫 row-style="height: 100px;"，
會報錯 Invalid prop: type check failed for prop "rowStyle". Expected Object, Function, got String暂雹。
- 解釋：該變量需要一個對象或者方法颂碧，而你給他的是一個string窥翩。
- 解決方法：應(yīng)該在前面加上: 代表變量如孝，在下面定義一個對象 將對象填入 :row_style="yourObject"
https://blog.csdn.net/qq_39313596/article/details/81477735
表格 滾動條樣式修改
<style>
/* 滾動條的寬度 */
.el-table .el-table__body-wrapper::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* 滾動條的滑塊 */
.el-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #e6e6e6 !important;
border-radius: 3px;
}
</style>
https://segmentfault.com/q/1010000016366942?utm_source=tag-newest
JS
表格路由跳轉(zhuǎn)
<el-table-column label="問題"
width="500">
<template slot-scope="scope">
<router-link v-if="isHelpResolve" :to="{ name: 'helpsResolve', params: {id: scope.row.id} }">
<span>{{ scope.row.title }}</span>
</router-link>
</template>
</el-table-column>
http://www.reibang.com/p/fe96cd805f3d
表格手風(fēng)琴充蓝，且動態(tài)獲取表格展開的數(shù)據(jù)
<el-table :data="tableData"
:row-key="getRowKeys"
@expand-change="expandChange"
:expand-row-keys="expands">
</el-table>
data () {
return {
// 獲取row的key值
getRowKeys(row) {
return row.id;
},
// 要展開的行，數(shù)值的元素是row的key值
expands: []
}
}
expandChange (row) {
if (this.expands.indexOf(row.id) >= 0) {
this.expands.shift() // 收起當(dāng)前行
return
}
this.expands = []
this.expands.push(row.id) // 只展開當(dāng)前行
this.tableData.forEach((item, index) => {
if (item.id == row.id) {
// 直接為動態(tài)展開的數(shù)據(jù)锚沸，賦值
this.$set(this.tableData[index], 'childData', this.childData)
// this.$set(要賦值的對象跋选，屬性名，數(shù)據(jù)) // 如果賦值后數(shù)據(jù)沒有刷新哗蜈，就需要提前清空數(shù)據(jù)
}
}, this)
},
https://segmentfault.com/q/1010000008981772
表格嵌套并且在子表格沒有數(shù)據(jù)的時候隱藏展開按鈕
:row-class-name="getRowClass"
getRowClass(row, rowIndex) {
if (row.row.children.length == 0) {
// 判斷當(dāng)前行是否有子數(shù)據(jù)
return 'row-expand-cover'
}
},
.row-expand-cover td:first-child .el-table__expand-icon {
display: none;
}
https://blog.csdn.net/Null_Bugs/article/details/81146044
表格提交時獲取所有選中的checkbox的數(shù)據(jù)
https://blog.csdn.net/rickiyeat/article/details/76595308
表格復(fù)選框配合分頁前标，數(shù)據(jù)如何回顯（reserve-selection與row-key結(jié)合）
- html
<el-table :row-key="getRowKeys">
<el-table-column type="selection" :reserve-selection="tableTrue"></el-table-column>
</el-table>
- js
data () {
return {
// 獲取row的key值
getRowKeys (row) {
return row.id
},
tableTrue: true
}
}
https://segmentfault.com/q/1010000009772656
表格滾動條回到頂部
el-table 中設(shè)置 ref="mytable"
this.$refs.mytable.bodyWrapper.scrollTop =0;
http://www.reibang.com/p/8d7f28d7bd87
表格復(fù)選框，清空選中的值
<el-table
ref="multipleTable"
:data="tableData">
</el-table>
// 加到點擊事件或其他事件中
this.$refs.multipleTable.clearSelection();
table列超出部分省略加懸浮提示（2.8.2新加功能）
<el-table-column :show-overflow-tooltip="true">
</el-table-column>
https://blog.csdn.net/xdhc304/article/details/80611227
表格固定表頭和某一列
- 固定表頭：（給表格設(shè)置高）
<el-table :height="tableHeight"></el-table> // 可以是數(shù)字距潘，也可以自定義數(shù)值
- 固定某一列：（給列設(shè)置 fixed）
<el-table-column prop="name" fixed></el-table-column>
獲取表格每一行的下標(biāo)（用作表格序號）
<template scope="scope">
<span v-text="scope.$index+1"></span>
</template>
https://blog.csdn.net/y1s2y3/article/details/82733179
獲取每行的索引值
<el-table :row-class-name="tableRowClassName"
@row-click = "onRowClick"></el-table>
methods: {
tableRowClassName ({row, rowIndex}) {
//把每一行的索引放進(jìn)row
row.index = rowIndex;
},
onRowClick (row, event, column) {
//行點擊消除new標(biāo)記
var index = row.index;
var deleteIndex = Array.indexOf(this.showIndexArr, index);
if (deleteIndex != -1) {
this.showIndexArr.splice(deleteIndex,1);
}
}
}
https://www.cnblogs.com/yangyi9343/p/9295293.html
表格點擊展開：
隱藏展開符號：
.el-table__expand-column .cell {
display: none;
}
將點擊事件賦值到其他地方：
<el-table ref="table">
<el-table-column label="操作">
<template slot-scope="props">
<el-button type="primary" @click="handleCheck(props.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
handleCheck(row) {
const $table = this.$refs.table
$table.toggleRowExpansion(row)
$table.toggleRowSelection(row)
}
https://www.cnblogs.com/daipianpian/articles/9516088.html
單擊某一行數(shù)據(jù)時選中對應(yīng)的復(fù)選框
<el-table @row-click="clickRow" ref="moviesTable" :data="tableData"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="名稱"></el-table-column>
</el-table>
clickRow(row){
this.$refs.moviesTable.toggleRowSelection(row)
}
https://blog.csdn.net/gongyi199393/article/details/80902845
element-ui的table列超出部分省略加懸浮提示
<el-table-column :show-overflow-tooltip="true">
</el-table-column>
https://blog.csdn.net/xdhc304/article/details/80611227
Element UI的表格雙擊之后可編輯（沒試過）
https://segmentfault.com/q/1010000014417142/a-1020000014418134
elementUi table根據(jù)不同狀態(tài)變成不同顏色的背景色
<el-table :row-class-name="tableColor"></el-table>
tableColor({row, rowIndex}) {
if(rowIndex == rowIndex){
if(row.status == 1){
return 'tableColor-blue'
}else if(row.status == 2){
return 'tableColor-yellow'
}else if(row.status == 3){
return 'tableColor-violet'
}else if(row.status == 4){
return 'tableColor-green'
}
}
}
http://www.czl.mobi/a/qianduankuangjia/Vue/112.html
表格展開行報錯
報錯： [Vue warn]: Error in callback for watcher "data": "Error: if there's nested data, rowKey is required."
- 表面的意思是如果有嵌套的數(shù)據(jù)炼列，需要在el-table標(biāo)簽中新增row-key字段
當(dāng)tableData數(shù)據(jù)格式為以下形式會出現(xiàn)上面的報錯：
tableData: [{
name: '好滋好味雞蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷蘭優(yōu)質(zhì)淡奶音比，奶香濃而不膩',
children:[{
name:'土雞蛋',
desc:'美味...'
}]
}]
問題就出現(xiàn)在key為children名字上唯鸭，如果換成其他命名不會報錯。硅确。目溉。×馀
如下可使用array.map函數(shù)處理下數(shù)據(jù)就可以解決問題了缭付。。循未。
let handleData = tableData.map(item => {
return {
name: item.name,
category: item.category,
desc: item.desc,
childrens: item.children
};
});
https://www.cnblogs.com/changxue/p/10719454.html
表格中禁用部分復(fù)選框
<el-table-column type="selection" :selectable="selectable"></el-table-column>
methods: {
selectable(row, index) {
if (row.status == 1) {
return true
} else {
return false
}
}
}
https://www.jb51.net/article/170515.htm
編輯陷猫，新增，刪除一行
- tableData中push一條新數(shù)據(jù)（新增）
tableData.push({ fildna: '',fildtp:'',remark:''})
https://blog.csdn.net/alokka/article/details/73719371
表格數(shù)據(jù)為空時自定義顯示內(nèi)容
<el-table :data="tableData">
<template slot="empty">
<div class="noTableData">
暫無數(shù)據(jù)的妖，或點擊 <span @click="getMakeList(1)">“刷新”</span>
</div>
</template>
</el-table>
https://blog.csdn.net/m0_46627730/article/details/106034638
自定義表頭內(nèi)容
<el-table-column
prop="delete"
label="刪除"
width="120"
>
<template
slot="header"
slot-scope="{ column, $index }"
>
<i
class="el-icon-delete"
@click="clearAll"
>
</i>
</template>
<template slot-scope="scope">
<el-button
type=""
@click="handleDelete(scope.row)"
>
刪除
</el-button>
</template>
</el-table-column>
https://www.cnblogs.com/wenxinsj/p/10613764.html
刪除一行
<el-table :data="tableData">
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleDelete(scope.$index)">刪除</el-button>
</template>
</el-table-column>
</el-table>
handleDelete(index){ //刪除行數(shù)
this.tableData.splice(index, 1)
}
