簡介
本文主要介紹vue table 使用el-table為行添加自定義背景色。
概述
element-ui為開發(fā)者簡化了極大的前端開發(fā)工作当犯，但是過于強力的封裝，必然導(dǎo)致可自定義性質(zhì)的退化割疾，有時會為了一個小功能而花費更長的時間.
此篇介紹如何對element-ui 中的el-table 添加行自定義選中背景色和hover變色效果嚎卫。
效果圖
element-ui.jpg
需求由來
vue is very hot in developers recently, i want to learn it all the time.
one week ago, i rebuild my little partner with VUE and learn so much.
but one problem ocuur when i was happing for me ,
it just like a ball hit my head , lost too much time to fix it, so i must remark it today.
the way to fix
為了解決這個問題，在網(wǎng)上看了很多資料宏榕，但是都沒啥效果拓诸，所以還是看官方文檔，自己研究吧麻昼，功夫不負有心人奠支，DOWN IT！
nothing to say , but code first!
html code
> html 代碼
<div class="table-box">
<el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%; cursor: pointer;"
@selection-change="handleSelectionChange"
@row-click="rowClick"
@select-all="selectAll"
:row-class-name="tableRowClassName"
@select="singleCheck">
<el-table-column type="selection" label="全選"></el-table-column>
<el-table-column prop="columnDesc" label="備注"></el-table-column>
<el-table-column label="字段名" prop="columnDesc"></el-table-column>
<el-table-column prop="name" label="操作">
<template slot-scope="scope">
<div style="color: #3280d8;">clickMe</div>
</template>
</el-table-column>
</el-table>
</div>
data methods
JS代碼
export default {
data() {
return {
tableData: [],
multipleSelection: [],
// 用于存放被選中行的index
numbers: []
}
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach((row) => {
// 再次調(diào)用toggleRowSelection則取消選中
this.$refs.multipleTable.toggleRowSelection(row);
if (this.numbers.indexOf(row.index) == -1) {
console.log("選中" + row.index)
this.numbers.push(row.index);
} else {
console.log("取消選中" + row.index)
this.numbers.splice(this.numbers.indexOf(row.index), 1);
}
})
} else {
this.$refs.multipleTable.clearSelection()
}
},
handleSelectionChange(val) {
this.multipleSelection = val
},
// 單行checkbox選中觸發(fā)
singleCheck(val, row) {
let index = row.index;
if (this.numbers.indexOf(index) == -1) {
console.log("選中" + index)
this.numbers.push(index);
} else {
console.log("取消選中" + index)
this.numbers.splice(this.numbers.indexOf(index), 1);
}
},
// 全選checkbox點擊時觸發(fā)
selectAll(val, row) {
// 判斷是否全選
console.log(this.tableData.length + "-" + this.multipleSelection.length)
if (this.multipleSelection.length >= this.tableData.length) {
// 表單綁定的數(shù)據(jù)
console.log("全選")
// 所有index放入數(shù)組中
this.tableData.forEach((item, i) => {
this.numbers.push(item.index);
});
this.$refs.multipleTable.toggleRowSelection(row);
} else {
console.log("取消全選")
// 清空背景數(shù)組
this.numbers.splice(0)
}
},
// 重置所有選中行
resetSelect() {
// 選中的需要取消選中
if (this.numbers.length > 0) {
this.numbers.forEach(index => {
this.$refs.multipleTable.toggleRowSelection(this.tableData[index]);
})
}
// 清空數(shù)組
this.numbers.splice(0)
},
// 行點擊事件
rowClick(row) {
let index = row.index;
if (this.numbers.indexOf(index) == -1) {
console.log("選中" + index)
this.numbers.push(index);
} else {
console.log("取消選中" + index)
this.numbers.splice(this.numbers.indexOf(index), 1);
}
// 再次點擊時抚芦，調(diào)用toggleRowSelection則取消選中
this.$refs.multipleTable.toggleRowSelection(row);
},
/* 設(shè)置選中背景色 */
tableRowClassName({row,rowIndex}) {
// 為每行添加屬性index
row.index = rowIndex;
let color = "";
this.numbers.forEach((r, i) => {
if (rowIndex === r) {
// 自定義class名稱倍谜，需要寫到全局element-ui 的scss文件中或者用scoped做穿透
// 本人穿透未成功迈螟，所以就沒用scoped
color = "myRowClass";
}
});
return color;
}
}
}
</script>
css
css 代碼
/* 鼠標(biāo)上移 hover效果 */
.el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: #9198e5 !important;
font-size: 18px !important;
}
/* 選中改變自定義背景色 */
.myRowClass {
// background-color: yellow !important;
// 設(shè)置漸變色
background-image: linear-gradient(#4d33280a, #7f87e3) !important;
}
效果
單擊行時，行對應(yīng)checkbox選中尔崔，其背景色會改變;再次單擊會取消選中答毫，行背景色變回原來的顏色。
全選季春，單選效果和單擊行一樣洗搂。
以下是效果圖，已經(jīng)解決了全選/反選和單擊行的效果沖突
element-ui.jpg
總結(jié)
element-ui 很好用载弄，但同時喘批，如果要實現(xiàn)一些自定義功能還需要仔細去研究組件源碼特咆，后續(xù)會繼續(xù)補充。
