需求
一個表格,點擊表格,某行字體顏色改變;
解決方案
- 表格行的點擊事件是直接在原生組件里面加的,具體方法參考此處
2.來看下頁面結構。
<uni-table>
<uni-tr>
<uni-td>
<view></view>
</uni-td>
<uni-td>
<view></view>
</uni-td>
</uni-tr>
</uni-table>
看起來平平無奇,但實際上有很多坑(不排除是因為我缺乏了解不知道正確的方法,畢竟剛上手uniapp沒幾天)
單元格里面全部用view標簽是因為內容稍微有點復雜,感覺我遇到的坑跟我用view填單元格有關系。
2.1 在uni-table里設置全表格字體顏色無效;
2.2 在uni-tr里設置行字體顏色無效,但部分字體樣式是生效的;
2.3 在uni-td里寫正則動態加載class,會報錯,繼而改成在里面寫一個方法,讓方法返回class的名字
2.4 接上一步:
<uni-td :class="setClass()">
<view></view>
</uni-td>
setClass:function(){
return className;
}
用這種方式返回class,設置字體顏色color屬性,在內置瀏覽器運行是生效的。
但是在真機上就不生效了,其他屬性能生效,color不可以!!!!
經過嘗試,把class往view里面塞就可以了。
<uni-td>
<view :class="setClass()"></view>
</uni-td>
等有空試一下如果里面不寫view,用普通的文字是不是就沒這個坑了。