快捷導(dǎo)航

Vue+ElementUI表格狀態(tài)區(qū)分,row-class-name屬性詳解

更新時(shí)間：2024年08月10日 09:34:28 作者：roongyan92

這篇文章主要介紹了Vue+ElementUI表格狀態(tài)區(qū)分,row-class-name屬性,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

通過(guò)指定Table 組件的 row-class-name屬性

來(lái)為T(mén)able中的某一行添加 class，表明該行處于某種狀態(tài)。

1.在表格組件上綁定row-class-name屬性

        <el-table
          ref="multipleTable"
          :data="tableList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          border
          :key="Math.random()"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            type="selection"
            width="50"
            align="center"
          ></el-table-column>
          <template v-for="item in tableTitle">
            <el-table-column
              :label="item.label"
              :key="item.prop"
              :prop="item.prop"
              min-width="90px"
              align="center"
            ></el-table-column>
          </template>
        </el-table>

2.在樣式中加入背景色

 .el-table .info-row {
    background: #e4e7ed;
  }

3.根據(jù)業(yè)務(wù)需求添加方法（methods中）

tableRowClassName({ row, rowIndex }) {
   if (row.isTop && row.isTop == 1) {
      return "info-row";
   }
   return "";
}

注意：

row-class-name屬性與stripe = true互斥

如果你的表格把stripe 屬性設(shè)為true，即斑馬紋顯示，

后又設(shè)置了row-class-name屬性，那row-class-name的效果不會(huì)完全體現(xiàn)，

還是斑馬紋，只是斑馬紋的顏色變化了，

即row-class-name屬性與stripe = true互斥，不能同時(shí)存在！??！

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue遞歸組件實(shí)戰(zhàn)之簡(jiǎn)單樹(shù)形控件實(shí)例代碼
這篇文章主要介紹了vue遞歸組件實(shí)戰(zhàn)之簡(jiǎn)單樹(shù)形控件的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-08-08
vue點(diǎn)擊input彈出帶搜索鍵盤(pán)并監(jiān)聽(tīng)該元素的方法
今天小編就為大家分享一篇vue點(diǎn)擊input彈出帶搜索鍵盤(pán)并監(jiān)聽(tīng)該元素的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
淺析Vue實(shí)例以及生命周期
這篇文章給大家分享了Vue實(shí)例以及生命周期的相關(guān)知識(shí)點(diǎn)內(nèi)容，有興趣的朋友們可以學(xué)習(xí)下。
2018-08-08
Animate.css在vue中的使用方式
這篇文章主要介紹了Animate.css在vue中的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
淺談Vue插槽實(shí)現(xiàn)原理
vue.js的靈魂是組件，而組件的靈魂是插槽。借助于插槽，我們能最大程度上實(shí)現(xiàn)組件復(fù)用。本文主要是對(duì)插槽的實(shí)現(xiàn)機(jī)制進(jìn)行詳細(xì)概括總結(jié)，在某些場(chǎng)景中，有一定的用處
2021-06-06
vue實(shí)現(xiàn)2個(gè)接口同步執(zhí)行方式
案例1使用async/await結(jié)合Promise.all實(shí)現(xiàn)并行接口調(diào)用,案例2通過(guò)async/await順序執(zhí)行確保數(shù)據(jù)依賴,兩種方式適用于不同場(chǎng)景,合理選擇可提升效率
2025-08-08
詳解Vue router路由
這篇文章主要為大家介紹了Vue 的router路由，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-11-11
Vue2.x中利用@font-size引入字體圖標(biāo)報(bào)錯(cuò)的解決方法
今天小編就為大家分享一篇Vue2.x中利用@font-size引入字體圖標(biāo)報(bào)錯(cuò)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue通過(guò)v-show實(shí)現(xiàn)回到頂部top效果
這篇文章主要介紹了vue通過(guò)v-show實(shí)現(xiàn)回到頂部top效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-12-12
vue實(shí)現(xiàn)計(jì)算器封裝
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)計(jì)算器的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04