快捷導(dǎo)航

Element Table的row-class-name無效與動態(tài)高亮顯示選中行背景色

更新時間：2018年11月30日 10:19:48 作者：CCG_fighting

這篇文章主要介紹了Element Table的row-class-name無效與動態(tài)高亮顯示選中行背景色，本文詳細的介紹了解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

Element UI 的Table組件踩坑記：

（1）參數(shù)row-class-name無效的坑：官方文檔給出了如下代碼：

但是我使用后并沒有出現(xiàn)預(yù)初想要第一行高亮的效果，然后console.log(row, rowIndex)，發(fā)現(xiàn)控制臺輸出的值均為undefined。最終解決方案是只要傳入row或者rowIndex即可，然后根據(jù)自己所要的數(shù)據(jù)而進行處理，后來我修改代碼為如下：

tableRowClassName(row) {
 if (row.number === 1 && this.isActive) {
  return 'first-row'
 } else {
  return ''
 }
}

即可創(chuàng)建實例時已經(jīng)渲染了第一行數(shù)據(jù)，其中number是我已經(jīng)定義的第幾行（根據(jù)自己獲取數(shù)據(jù)結(jié)構(gòu)自行使用）isActive是我等下要控制實現(xià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>

//下面通過修改原插件的樣式來顯示點擊的當(dāng)前行，注意由于是原插件全局的，所以style不能使用scope屬性
<style>
.current-row > td {
 background: #218af3 !important;
}
</style>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

關(guān)于Less在Vue中的使用方法介紹
最近發(fā)現(xiàn)好多小伙伴在面試的過程中會問到vue如何使用less和scss，所以下面這篇文章主要給大家介紹了關(guān)于Less在Vue中的使用方法,需要的朋友可以參考下
2023-10-10
VUE JS 使用組件實現(xiàn)雙向綁定的示例代碼
本篇文章主要介紹了VUE JS 使用組件實現(xiàn)雙向綁定，詳細的介紹了vue的雙向數(shù)據(jù)綁定原理以及核心代碼模塊，具有一定的參考價值，有興趣的可以了解一下。
2017-01-01
利用Vue.js框架實現(xiàn)火車票查詢系統(tǒng)（附源碼）
這篇文章主要介紹了利用Vue.js框架實現(xiàn)火車票查詢系統(tǒng)的相關(guān)資料,，文中給出了詳細的介紹與示例代碼，并在文章結(jié)尾給出了完整的項目下載，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-02-02
vuejs簡單驗證碼功能完整示例
這篇文章主要介紹了vuejs簡單驗證碼功能,結(jié)合完整實例形式分析了vue.js驗證碼的生成、顯示、校驗等相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
VUE3學(xué)習(xí)教程之全局組件和局部組件
組件（Component）是Vue.js最強大的功能之一,組件可以擴展?HTML?元素,封裝可重用的代碼,這篇文章主要給大家介紹了關(guān)于VUE3學(xué)習(xí)教程之全局組件和局部組件的相關(guān)資料,需要的朋友可以參考下
2022-01-01
vue+node實現(xiàn)圖片上傳及預(yù)覽的示例方法
這篇文章主要介紹了vue+node實現(xiàn)圖片上傳及預(yù)覽的示例方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
Vue中的slot使用插槽分發(fā)內(nèi)容的方法
這篇文章主要介紹了Vue中的slot使用插槽分發(fā)內(nèi)容的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
使用Vue寫一個todoList事件備忘錄經(jīng)典小案例
學(xué)習(xí)了幾天Vue之后終于迎來了第一個小案例,todoList是非常常見地一個小案例,下面這篇文章主要給大家介紹了關(guān)于使用Vue寫一個todoList事件備忘錄經(jīng)典小案例的相關(guān)資料,需要的朋友可以參考下
2022-10-10
Vue給?elementUI?中的?this.$confirm、this.$alert、?this.$promp
這篇文章主要介紹了Vue給?elementUI?中的?this.$confirm、this.$alert、?this.$prompt添加按鈕的加載效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-07-07
element ui里dialog關(guān)閉后清除驗證條件方法
下面小編就為大家分享一篇element ui里dialog關(guān)閉后清除驗證條件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02