Element Table的row-class-name無效與動(dòng)態(tài)高亮顯示選中行背景色
Element UI 的Table組件踩坑記：
（1）參數(shù)row-class-name無效的坑：官方文檔給出了如下代碼：
但是我使用后并沒有出現(xiàn)預(yù)初想要第一行高亮的效果，然后console.log(row, rowIndex)，發(fā)現(xiàn)控制臺(tái)輸出的值均為undefined。最終解決方案是只要傳入row或者rowIndex即可，然后根據(jù)自己所要的數(shù)據(jù)而進(jìn)行處理，后來我修改代碼為如下：
tableRowClassName(row) {
if (row.number === 1 && this.isActive) {
return 'first-row'
} else {
return ''
}
}
即可創(chuàng)建實(shí)例時(shí)已經(jīng)渲染了第一行數(shù)據(jù)，其中number是我已經(jīng)定義的第幾行（根據(jù)自己獲取數(shù)據(jù)結(jié)構(gòu)自行使用）isActive是我等下要控制實(shí)現(xiàn)點(diǎn)擊所在行而定義的參數(shù)，效果圖如下：
（二）參數(shù)highlight-current-row的使用：
<template>
<el-table :data="imageList" :row-class-name="tableRowClassName" :highlight-current-row="true" row-key="getNumber" @row-click="checkImage" style="width: 100%">
<el-table-column prop="number" label="搜索結(jié)果（按準(zhǔn)確度排序）" style="width: 50%"></el-table-column>
<el-table-column prop="distance" label="誤差值" style="width: 50%"></el-table-column>
</el-table>
</template>
<script>
export default {
methods: {
checkImage(row, event, column) {
this.src = row.img
this.isActive = false
},
tableRowClassName(row) {
if (row.number === 1 && this.isActive) {
return 'first-row'
} else {
return ''
}
}
},
}
</script>
//下面通過修改原插件的樣式來顯示點(diǎn)擊的當(dāng)前行，注意由于是原插件全局的，所以style不能使用scope屬性
<style>
.current-row > td {
background: #218af3 !important;
}
</style>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 詳解VUE 對(duì)element-ui中的ElTableColumn擴(kuò)展
- element-ui 中的table的列隱藏問題解決
- VUE element-ui 寫個(gè)復(fù)用Table組件的示例代碼
- 用jquery.sortElements實(shí)現(xiàn)table排序
- element ui table 增加篩選的方法示例
- VUE2.0 ElementUI2.0表格el-table自適應(yīng)高度的實(shí)現(xiàn)方法
- VUE2.0+ElementUI2.0表格el-table循環(huán)動(dòng)態(tài)列渲染的寫法詳解
- VUE2.0+ElementUI2.0表格el-table實(shí)現(xiàn)表頭擴(kuò)展el-tooltip
相關(guān)文章
使用Vue實(shí)現(xiàn)簡(jiǎn)單日歷效果
這篇文章主要為大家詳細(xì)介紹了使用Vue實(shí)現(xiàn)簡(jiǎn)單日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
vuex 如何動(dòng)態(tài)引入 store modules
這篇文章主要介紹了vuex 如何動(dòng)態(tài)引入 store modules，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue限制實(shí)現(xiàn)不登錄無法進(jìn)入其他頁(yè)面
本文主要介紹了vue限制實(shí)現(xiàn)不登錄無法進(jìn)入其他頁(yè)面,vue限制不登錄,通過url進(jìn)入其他頁(yè)面強(qiáng)制回到登錄頁(yè)面；已經(jīng)登錄的情況下,不可以再進(jìn)入登錄界面,感興趣的可以了解一下2024-01-01
vue項(xiàng)目中使用rem,在入口文件添加內(nèi)容操作
這篇文章主要介紹了vue項(xiàng)目中使用rem,在入口文件添加內(nèi)容操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家詳細(xì)介紹了vue+antd實(shí)現(xiàn)折疊與展開組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
下面小編就為大家分享一篇vue刷新和tab切換實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue 大文件上傳和斷點(diǎn)續(xù)傳的實(shí)現(xiàn)
文件上傳在很多項(xiàng)目中都用的到，如果是幾M的很快就傳送完畢，如果是大文件呢？本文就介紹了Vue 大文件上傳和斷點(diǎn)續(xù)傳的實(shí)現(xiàn)，感興趣的可以了解一下2021-06-06
vue實(shí)現(xiàn)彈窗引用另一個(gè)頁(yè)面窗口
這篇文章主要介紹了vue實(shí)現(xiàn)彈窗引用另一個(gè)頁(yè)面窗口，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)tab欄切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
解決vue-cli webpack打包開啟Gzip 報(bào)錯(cuò)問題
這篇文章主要介紹了vue-cli webpack打包開啟Gzip 報(bào)錯(cuò)問題的解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07