需求
一个表格,点击表格,某行字体颜色改变;
解决方案
- 表格行的点击事件是直接在原生组件里面加的,具体方法参考此处
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,用普通的文字是不是就没这个坑了。