Layui radio 默认水平排列,需用CSS控制垂直布局:对普通列用templet包裹label并设display:block,对fixed列需单独加样式,同时确保name统一、事件监听正常。

layui radio 列默认是水平排列,没法直接改
Layui 的 type: 'radio' 列默认把所有选项渲染成一行内联元素,没有内置配置项控制方向。这不是 bug,而是设计如此——它只负责生成单选按钮 + 标签的行内结构,布局交给 CSS 控制。
用 CSS 强制 radio 项垂直堆叠
最直接有效的办法是在 radio 列的 templet 或全局样式中,把容器设为 display: block,再让每个选项独占一行:
- 如果只影响某列,在
cols中加templet:{ field: 'status', title: '状态', type: 'radio', templet: function(d) { return '<div style="display:block"><input type="radio" name="status_' + d.layId + '" value="' + d.status + '"> ' + d.statusName + '</div>'; } } - 如果整张表都要改,加全局样式:
.layui-table tbody .layui-form-radio { display: block; margin: 4px 0; }注意:必须带tbody前缀,否则可能被 layui 内联样式覆盖 - 别碰
.layui-form-radio * { display: block }—— 这会破坏 radio 按钮和文字的基线对齐,导致图标悬浮或下沉
radio 垂直排列后点击区域变小,要手动扩大
原生 radio 的可点击区域极小,垂直排列后用户容易点不中。必须给每项加 padding 或包裹一层 label:
- 推荐用
label包裹(语义正确、点击体验好):<label><input type="radio" name="x" value="1"> 选项一</label>
- 如果用
templet动态生成,确保name值统一(同一组 radio 必须同名),且不要漏掉value - 避免用
onclick绑定事件替代原生 click —— 这会导致 Layui 的table.on('radio(filter)')监听失效
垂直 radio 和表格固定列(fixed)一起用容易错位
当 radio 列设为 fixed: 'left' 时,Layui 会把它抽离到独立的 DOM 结构里,此时上面写的 .layui-table tbody .layui-form-radio 选择器就匹配不到 —— 因为 fixed 列不在 tbody 里。
- 解决办法:单独给 fixed 列加样式:
.layui-table-fixed-l .layui-form-radio { display: block; margin: 4px 0; } - 更稳妥的做法是统一在
cellStyle里控制:cellStyle: function() { return { 'padding': '6px 0' }; }再配合templet里的label结构,绕过选择器定位问题 - 测试时务必在不同分辨率下检查 fixed 区域是否随内容高度自适应——vertical-align 失效常在这里最先暴露
真正麻烦的不是怎么排成一列,而是你得确认当前 radio 是由 table 自动渲染的,还是你用 templet 手动拼的;前者能触发 radio(filter) 事件,后者得自己绑定 change 并调 table.setRowChecked 同步状态。


















