1.這兩個屬性的使用，row-class-name用在el-table標簽上，class-name用在el-table-column標簽上。兩個屬性即可綁定類名也可綁定函數(shù)
<!-- 這里是綁定函數(shù)，也可以綁定類名 -->
<el-table :data="tableData" @selection-change="handleSelect" :row-class-name="shower" border height="400px" scrollbar-always-on>
<el-table-column width="60" type="selection" />
<el-table-column width="150" prop="name" label="訂單號" />
<el-table-column width="120" prop="estimateTotal" label="跟單員" />
<el-table-column width="5" />
<el-table-column label="操作" width="150">
<template #default="{ row }">
<el-button type="primary" text @click="confirmData(row, 1)" v-if="true">確認應(yīng)收數(shù)據(jù)</el-button>
<el-button type="primary" text @click="Removeconfirm(row, 1)" v-else>撤銷確認</el-button>
</template>
</el-table-column>
<!-- 這里是綁定類名，也可以綁定函數(shù) -->
<el-table-column width="180" prop="name" label="客戶名稱" class-name="unconfirmeds"/>
<el-table-column width="120" prop="meetName" label="核銷狀態(tài)" />
</el-table>2.綁定函數(shù)時就可以通過條件來決定哪行需要添加樣式
function shower({row}){
console.log(row);
if(row.name==='阿尼亞'){
return 'unconfirmeds'
}else{
return ''
}
}3.樣式無效處理
樣式?jīng)]有效果的原因在于添加的樣式不是全局樣式，所以只需要將scoped去除或者自己定義一個全局樣式
<style>
.unconfirmeds{
background-color: rgba(255, 0, 0, 0.075) !important;
color:red;
font-weight: 700;
}
</style>4.最終效果文章來源：http://www.zghlxwxcb.cn/news/detail-806930.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-806930.html
到了這里，關(guān)于element中表格組件的row-class-name和class-name屬性的使用以及無效處理的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
