如何在PrimeVue DataTable列头标题与复选框间换行(禁用JS/CSS)
PrimeVue DataTable列头标题与复选框换行实现方案
- 不用JS也不用自定义CSS,直接靠Column组件的header插槽就能实现标题在上、复选框在下的布局:
- 删掉原代码里的
header="Check",改用自定义header插槽 - 在插槽里写标题,用
<br>或者块级元素(比如<div>)强制换行,PrimeVue会自动把多选复选框插在插槽内容后面 - 保留原有的
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
相关产品推荐
相关产品推荐

