欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue2+element?ui?中的el-table?選中當(dāng)前行當(dāng)前行變色的實(shí)現(xiàn)代碼

 更新時(shí)間：2024年07月21日 10:15:08   作者：周bro  
這篇文章主要介紹了vue2+element?ui?中的el-table?選中當(dāng)前行當(dāng)前行變色的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

vue2+element ui 中的el-table 選中當(dāng)前行當(dāng)前行變色

 <el-table class="eltable" ref="multipleTable" :data="tableData" style="margin-top: 50px;width: 100%;"
                    :row-class-name="tableRowClassName" @row-click="rowClick">
                    <el-table-column v-for="(item, index) in tableTitleList" :label="item.name" :key="index"
                        :prop="item.prop" :width="item.width" align="center">
                    </el-table-column>
                </el-table>

方法：

   rowClick(row, column, event) {
            console.log(row,column);
            this.selectIndex = row.index;
        },
        // 行選中樣式
        tableRowClassName({
            row,
            rowIndex
        }) {
            row.index = rowIndex 
            if (rowIndex == this.selectIndex) {
                return 'success-row';
            }
        },

樣式：

::v-deep .success-row {
    background-color: #81D3F8 !important;
}

補(bǔ)充：Vue+ELement UI el-table移入或選中某行時(shí)改變顏色

Vue+ELement UI el-table移入或選中某行時(shí)改變顏色

起因

出庫(kù)按鈕 置灰時(shí)，鼠標(biāo)移入到表格的某行時(shí)，行背景顏色與按鈕背景顏色會(huì)被覆蓋住

最初顏色

在這里插入圖片描述

實(shí)現(xiàn)效果

修改行背景顏色

在這里插入圖片描述

<style>
   /* 用來(lái)設(shè)置當(dāng)前頁(yè)面element全局table 選中某行時(shí)的背景色*/
  .el-table__body tr.current-row>td{
    background-color: #92cbf1!important;
     color: #fff;
  }
/*鼠標(biāo)移入某行時(shí)的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover > td {
   background-color: #454545 !important;
   /* color: #fff; */
}
</style>

到此這篇關(guān)于vue2+element ui 中的el-table 選中當(dāng)前行當(dāng)前行變色的文章就介紹到這了,更多相關(guān)vue2 element ui el-table 選中當(dāng)前行內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue+vant實(shí)現(xiàn)商品列表批量倒計(jì)時(shí)功能

    vue+vant實(shí)現(xiàn)商品列表批量倒計(jì)時(shí)功能

    這篇文章主要介紹了vue+vant實(shí)現(xiàn)商品列表批量倒計(jì)時(shí)功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-01-01
  • Vue中watchEffect的追蹤邏輯介紹

    Vue中watchEffect的追蹤邏輯介紹

    這篇文章主要介紹了Vue中watchEffect的追蹤邏輯,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2025-04-04
  • vue-cli webpack 引入jquery的方法

    vue-cli webpack 引入jquery的方法

    小編使用的是webpack模板在vue-cli生成的工程中引入jquery的方法，首先在package.json里的dependencies加入"jquery" : "^2.2.3"，然后install，具體內(nèi)容詳情大家參考下本文
    2018-01-01
  • vue關(guān)于錨點(diǎn)定位、跳轉(zhuǎn)到指定位置實(shí)現(xiàn)方式

    vue關(guān)于錨點(diǎn)定位、跳轉(zhuǎn)到指定位置實(shí)現(xiàn)方式

    這篇文章主要介紹了vue關(guān)于錨點(diǎn)定位、跳轉(zhuǎn)到指定位置實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-04-04
  • Vue v-for中:key中item.id與Index使用的區(qū)別解析

    Vue v-for中:key中item.id與Index使用的區(qū)別解析

    這篇文章主要介紹了Vue v-for中:key中item.id與Index使用的區(qū)別解析,推薦使用【:key="item.id"】而不是將數(shù)組下標(biāo)當(dāng)做唯一標(biāo)識(shí),前者能做到全部復(fù)用,本文給大家詳細(xì)講解,感興趣的朋友跟隨小編一起看看吧
    2024-02-02
  • Unocss(原子化css)?使用及vue3?+?vite?+?ts講解

    Unocss(原子化css)?使用及vue3?+?vite?+?ts講解

    這篇文章主要介紹了Unocss(原子化css)使用vue3?+?vite?+?ts的方法,簡(jiǎn)單介紹了Unocss使用及圖標(biāo)庫(kù)使用，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
    2022-11-11
  • Vue實(shí)現(xiàn)類(lèi)似Spring官網(wǎng)圖片滑動(dòng)效果方法

    Vue實(shí)現(xiàn)類(lèi)似Spring官網(wǎng)圖片滑動(dòng)效果方法

    這篇文章主要介紹了Vue實(shí)現(xiàn)類(lèi)似Spring官網(wǎng)圖片滑動(dòng)效果方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-03-03
  • vue+jsplumb實(shí)現(xiàn)連線繪圖

    vue+jsplumb實(shí)現(xiàn)連線繪圖

    這篇文章主要為大家詳細(xì)介紹了vue+jsplumb實(shí)現(xiàn)連線繪圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-03-03
  • 前端elementUI?select選擇器實(shí)現(xiàn)遠(yuǎn)程搜索

    前端elementUI?select選擇器實(shí)現(xiàn)遠(yuǎn)程搜索

    這篇文章主要為大家介紹了前端使用elementUI?select選擇器實(shí)現(xiàn)遠(yuǎn)程搜索，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-05-05
  • 解決vue net :ERR_CONNECTION_REFUSED報(bào)錯(cuò)問(wèn)題

    解決vue net :ERR_CONNECTION_REFUSED報(bào)錯(cuò)問(wèn)題

    這篇文章主要介紹了解決vue net :ERR_CONNECTION_REFUSED報(bào)錯(cuò)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-08-08

最新評(píng)論