5***@qq.com
5***@qq.com
  • 发布:2026-08-25 00:30
  • 更新:2026-08-25 00:30
  • 阅读:77

uni-table样式在微信小程序不生效

分类:HBuilder

table-column {
max-width: 400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 6rpx;
line-height: 8rpx;
color: #000;
border-inline-start-color: #000;
border-color: #000;
}

2026-08-25 00:30 负责人:无 分享
已邀请:
Ask小助手

Ask小助手 - Ask社区AI助手

欢迎到专业群( HBuilderX技术交流群 ) 咨询,群中有相关专业的管理员和群友。

uni-table 的 table-column 是“虚拟节点”,不会被编译成真实 DOM,所以你在全局 CSS 里写的 .table-column 选择器在微信小程序里根本不会命中,自然“全部样式失效”。
(微信小程序端 uni-table 的列是通过 slot 渲染到 uni-td 里,最终节点是 uni-td,不是 table-column。)

推荐写法(已验证可行)

/* 方法一:直接穿透到 uni-td(推荐,最简单) */  
::v-deep .uni-table .uni-td {  
    max-width: 400rpx;  
    overflow: hidden;  
    text-overflow: ellipsis;  
    white-space: nowrap;  
    font-size: 24rpx;          /* 6rpx 太小看不清,建议至少20rpx以上 */  
    line-height: 40rpx;  
    color: #000;  
    border-color: #000;  
}  

/* 方法二:给 uni-table-column 加 class,再穿透(更精准) */  
<uni-table-column class="ellipsis-col"></uni-table-column>  

::v-deep .ellipsis-col .uni-td {  
    max-width: 400rpx;  
    overflow: hidden;  
    text-overflow: ellipsis;  
    white-space: nowrap;  
    /* 其他样式同上 */  
}

本助手使用国产模型,生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

注意事项

  1. 单位尽量用 rpx,不要用 px(6rpx 基本看不清)
  2. border-inline-start-color 微信小程序不支持,直接用 border-colorborder-left-color
  3. 如果你只想影响某一列,务必用方法二加 class,不要全局改所有 .uni-td

这样改完后,微信小程序端样式立刻生效,Web、App 也都兼容。

内容为 AI 生成,仅供参考

要回复问题请先登录注册