在使用IView這套漂亮的UI組件時(shí)伸刃，會(huì)遇到需要指定某行或者某列或者某單元格的樣式的方法：[官方文檔]https://www.iviewui.com/components/table
幾個(gè)注意點(diǎn)：
- 在Table組件調(diào)用時(shí)prop指定 :rowClassName="rowClassName"
是一個(gè)函數(shù)名，在methods方法中要去實(shí)現(xiàn)這個(gè)回調(diào)函數(shù)
rowClassName(row,index){
if(index===1){
return 'demo-table-info-row';
}
return '';
}
- 這個(gè)回調(diào)函數(shù)返回一個(gè)class樣式名：demo-row-red，在調(diào)用這個(gè)Table組件的父組件中的樣式要如下：
.ivu-table .demo-table-info-row td{
background-color: pink;
}
千萬(wàn)注意前面加上.ivu-table 以及后面加上td惑灵。為啥？我也不知道（我不太懂CSS眼耀，猜想這個(gè)加上是為了最后CSS整合的時(shí)候能定位到.....希望有大神能懂得給個(gè)科學(xué)的解釋......）
- 引申：比如說(shuō)英支，我做了個(gè)vue組件叫myTable.vue，簡(jiǎn)單的說(shuō)這個(gè)myTable.vue組件是封裝并擴(kuò)展了IView的Table組件哮伟。那么干花，我的業(yè)務(wù)系統(tǒng)要調(diào)用我自己的這個(gè)myTable組件的時(shí)候，才想起來(lái)要去指定特定行樣式楞黄，怎么辦？
去修改myTable.vue？在myTable.vue增加樣式函數(shù)砰盐？肯定不行谈撒，因?yàn)槲疫@個(gè)業(yè)務(wù)模塊要這樣定義行樣式，要是要換個(gè)業(yè)務(wù)模塊也調(diào)用這個(gè)mytable.vue,要用不同的行樣式怎么辦碎税？
所以尤慰，當(dāng)前的做法是：把myTable組件的props中把rowClassName拋出來(lái)，去給調(diào)用組件去實(shí)現(xiàn)啦雷蹂。注意的是：這個(gè)是函數(shù)伟端，需要指定下類型。
//myTable.vue的script段中：
props:{
rowClassName:{
type:Function,
default(){
return ''
}
},
//myTable.vue的 template段中：
<Table :row-class-name="rowClassName"
:columns="bizColumns" :data="bizData"></Table>
在業(yè)務(wù)模塊調(diào)用時(shí)
//業(yè)務(wù)模塊中：
<myTable :columns="tableCols" :data="tableData"
:rowClassName="mydefineRow"></myTable>
//然后在業(yè)務(wù)模塊去實(shí)現(xiàn)這個(gè)回調(diào)函數(shù)：
methods:{
mydefineRow(row,index){
if(index===1){
return 'demo-row-red';
}
return '';
}
}
//省略掉的內(nèi)容：在業(yè)務(wù)模塊中去實(shí)現(xiàn).demo-row-red這個(gè)css萎河，再?gòu)?qiáng)調(diào)下別忘了前面的.ivu-table 以及后面加上td
