Vue+ElementUI表格狀態(tài)區(qū)分,row-class-name屬性詳解
更新時間：2024年08月10日 09:34:28 作者：roongyan92
這篇文章主要介紹了Vue+ElementUI表格狀態(tài)區(qū)分,row-class-name屬性,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
通過指定Table 組件的 row-class-name屬性
來為Table中的某一行添加 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è)務需求添加方法（methods中）
tableRowClassName({ row, rowIndex }) {
if (row.isTop && row.isTop == 1) {
return "info-row";
}
return "";
}注意：
row-class-name屬性與stripe = true互斥
如果你的表格把stripe 屬性設為true，即斑馬紋顯示，
后又設置了row-class-name屬性，那row-class-name的效果不會完全體現(xiàn)，
還是斑馬紋，只是斑馬紋的顏色變化了，
即row-class-name屬性與stripe = true互斥，不能同時存在！??！
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
使用VUE實現(xiàn)在table中文字信息超過5個隱藏鼠標移到時彈窗顯示全部
這篇文章主要介紹了使用VUE實現(xiàn)在table中文字信息超過5個隱藏，鼠標移到時彈窗顯示全部,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
Vue提供了豐富的API和組件，可以幫助開發(fā)者快速地構建現(xiàn)代化的Web應用程序，本文介紹了Vue如何實現(xiàn)分頁功能，包括數(shù)據(jù)的獲取、分頁器的實現(xiàn)和頁面的渲染2023-09-09
這篇文章主要介紹了Vue使用zTree插件封裝樹組件操作,結合實例形式分析了vue.js整合zTree插件實現(xiàn)樹組件與使用相關操作技巧,需要的朋友可以參考下2019-04-04
這篇文章主要為大家介紹了Vue3必學技巧-自定義Hooks-讓寫Vue3更暢快示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
前端的數(shù)據(jù)均是通過接口請求拿到的，而Vue本身不支持ajax請求，那么該怎么解決Vue中的異步請求呢？這兒提供了幾種方法，希望對大家有所幫助2022-05-05
要求點擊修改按鈕之后部分輸入框由禁用狀態(tài)變?yōu)榭捎脿顟B(tài)。下面我給大家分享一段實例代碼基于vue組件中點擊按鈕后修改輸入框的狀態(tài)，需要的的朋友參考下2017-04-04
vue動態(tài)菜單、動態(tài)路由加載以及刷新踩坑實戰(zhàn)
這篇文章主要給大家介紹了關于vue動態(tài)菜單、動態(tài)路由加載以及刷新踩坑的相關資料,踩的這些坑其實是挺常見的,大家可以看看,避免遇到的時候再踩到同樣的坑,需要的朋友可以參考下2021-10-10
這篇文章主要為大家詳細介紹了Vue監(jiān)聽數(shù)據(jù)對象變化的源碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
vue 輸入電話號碼自動按3-4-4分割功能的實現(xiàn)代碼
這篇文章主要介紹了vue 輸入電話號碼自動按3-4-4分割功能的實現(xiàn)代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
vite配置別名并處理報錯:找不到模塊“xxx”或其相應的類型聲明方法詳解
我在學習vue3+vite+ts的時候,在配置別名這一步的時候遇到了一個問題,這篇文章主要給大家介紹了關于vite配置別名并處理報錯:找不到模塊“xxx”或其相應的類型聲明的相關資料,需要的朋友可以參考下2022-11-11