uni-app微信小程序中uni-table斑马线样式显示不出来

uni-app微信小程序中uni-table斑马线样式显示不出来

10 回复

您好，麻烦发个可复现demo

更多关于uni-app微信小程序中uni-table斑马线样式显示不出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html


刚测了一下 确实没生效 小程序中好像不支持nth-child所以stripe没生效 uni-table -> components -> uni-table -> uni-table.vue文件中

你直接用Hello uniapp 模版创建一个项目。运行到小程序查看 /pages/extUI/table/table 这个页面 就可以看到问题

官网的demo就是 我在源码上加了组件样式隔离配置就可以

回复 爱豆豆: 不是 是没加样式隔离

回复 啊程: 问题已确认了，同事在排查，stripe的默认值文档已修改

回复 DCloud_UNI_JBB: 好麻烦了 这个组件好多基础功能没有 后续有考虑加吗 比如固定表头和固定列等

回复 啊程: web可以实现，但是小程序和app目前还没有很好的解决方案

回复 DCloud_UNI_HT: <uni-table ref=“table” :loading=“loading” :emptyText=“error.message || ‘没有更多数据’” border stripe type=“selection” @selection-change=“selectionChange”>uniadmin里面这个是已经开启了斑马线和竖线了吗？在前端页面也没有显示，而且字体颜色和框，年龄大点的直接看不见啊。好难为情。

在uni-app微信小程序中，uni-table组件默认不显示斑马线样式（隔行变色）。需要手动通过CSS样式实现：

  1. 在table组件上添加class，例如：
<uni-table class="zebra-table">
  1. 在style中定义斑马线样式：
.zebra-table ::v-deep .uni-table-tr:nth-child(even) {
  background-color: #f5f5f5;
}
.zebra-table ::v-deep .uni-table-tr:nth-child(odd) {
  background-color: #ffffff;
}
回到顶部