el-table插件 :cell-class-name在vue组件使用不生效问题
cell-class-name常规使用
使用el-table快速开发的时候遇到了cell-class-name在vue组件使用不生效问题,百度了很多才找到解决方法,简单记录一下。
// html 结构精简
<el-table
stripe
:data="tableData"
style="width: 100%"
:cell-class-name="colorStyle"
>
/* ex-table-column是el-table-column的衍生,解决当每一列单元格内容过多自动换行的问题。二者在el-table中可以混用。
* 想了解ex-table-column可以看这个链接:https://www.npmjs.com/package/ex-table-column */
<ex-table-column
:autoFit='true'
:fitHeader='true'
prop="firstVisit"
label="首次访问时间">
</ex-table-column>
<ex-table-column
:autoFit='true'
:fitHeader='true'
prop="newUsers"
label="新增用户">
</ex-table-column>
<ex-table-column
:autoFit='true'
:fitHeader='true'
prop="nextDay"
label="次日">
</ex-table-column>
<ex-table-column
:autoFit='true'
:fitHeader='true'
prop="threeDaysLater"
label="3日后">
</ex-table-column>
<ex-table-column
:autoFit='true'
:fitHeader='true'
prop="fourDaysLater"
label="4日后">
</ex-table-column>
</el-table>
// script 数据精简
data(){
return {
tableData: [{
firstVisit: '2021-05-14',
newUsers: '49',
nextDay: '2.04%',
threeDaysLater: '4.08%',
fourDaysLater: '4.08%',
},{
firstVisit: '2021-05-14',
newUsers: '49',
nextDay: '2.04%',
threeDaysLater: '4.08%',
fourDaysLater: '4.08%',
}]
}
},
methods: {
colorStyle({row,column,rowIndex,columnIndex}){
if(columnIndex == 2){
if(rowIndex ==2){
return 'cell-grey';// 返回样式类名
}
}
}
// 样式
<style scope>
// 组件私有样式
</style>
<style>
// 一般组件样式需要加scope防止组件间样式污染,但是在这里不能加scope,需要是全局样式才能使cell-grey生效。
.cell-grey {
background: #f2f2f2!important;
}
</style>