You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在PrimeVue DataTable列头标题与复选框间换行(禁用JS/CSS)

PrimeVue DataTable列头标题与复选框换行实现方案
  • 不用JS也不用自定义CSS,直接靠Column组件的header插槽就能实现标题在上、复选框在下的布局:
    1. 删掉原代码里的header="Check",改用自定义header插槽
    2. 在插槽里写标题,用<br>或者块级元素(比如<div>)强制换行,PrimeVue会自动把多选复选框插在插槽内容后面
    3. 保留原有的selection-mode="multiple"、:rowspan="2"这些属性就行

替换后的代码:

<Column field="bCheck" :rowspan="2" selection-mode="multiple">
  <template #header>
    Check<br>
  </template>
</Column>
  • 要是觉得<br>的间距不够,直接用两个<br>,或者把标题放<div>里(div本身是块级元素,会自动换行),效果一样,完全不用碰样式或脚本。

内容的提问来源于stack exchange,提问作者Button Press

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.20 02:13:11