layui原生table不支持下拉多选,需用formselects插件;须在table.render的done和page.jump中初始化,动态渲染select并确保唯一lay-filter或id,取值用formselects.value()而非val()。

layui表格里怎么让下拉列支持多选
layui原生table不支持下拉多选渲染,必须靠第三方插件补足,目前最稳定的是formSelects。它不是layui内置组件,不能直接写type: 'select'就生效,得手动绑定+接管渲染逻辑。
常见错误现象:formSelects下拉框能弹出,但点击没反应、选中项不回填到表格单元格、编辑后保存时拿不到数组值。
- 必须在
table.render()的done回调里初始化formSelects,不能放在ready或onload里——表格DOM还没生成完 -
formSelects依赖form模块,记得layui.use(['table', 'form', 'formSelects']) - 表格列定义中用
templet返回带select标签的HTML,并加lay-filter和multiple属性
formSelects初始化时为什么表格里下拉没数据
因为formSelects默认只处理页面初始存在的select,而layui表格的单元格是动态生成的(尤其开启分页或重载后),每次table.reload()或翻页都会重建DOM,老的formSelects实例就失效了。
解决办法是把初始化逻辑封装成函数,在done和page事件里都调用:
function initFormSelectsInTable() {
formSelects.data('roleSelect', 'server', {
url: '/api/roles',
keyName: 'name',
keyVal: 'id'
});
formSelects.render('roleSelect');
}
然后在table.render()中:
- 写
done: initFormSelectsInTable - 写
page: { layout: ['count', ...], jump: initFormSelectsInTable }
表格编辑行保存时如何获取formSelects的多选值
formSelects的值不是存在select.value里,而是通过formSelects.value('filterName')取,返回的是字符串数组,比如["1", "3"]。如果直接用form.val()拿不到。
使用场景:点击“编辑”弹出layer表单,里面含表格某行的formSelects,提交前要收集值。
- 确保
select标签有lay-filter="roleSelect",和formSelects.render()参数一致 - 提交前执行
let roles = formSelects.value('roleSelect');,别用$('#xxx').val() - 如果后端要JSON数组,注意
formSelects返回的是字符串数组,需要JSON.stringify(roles)再传
layui 2.8+ 和 formSelects v4 兼容要注意什么
v4版本开始强制要求formSelects与layui的form模块同步触发校验和事件,否则编辑后form.on('submit')收不到值,或者校验提示错位。
容易踩的坑:
- 别混用v3和v4的CDN地址,v4的JS路径是
formSelects-v4.js,CSS是formSelects-v4.css - 初始化时必须传
{ search: true, clickClose: false }等配置项,否则在表格小单元格里下拉面板会被裁剪 - 如果表格列宽太窄,要给
formSelects加maxWidth: '300px',不然下拉选项显示不全
复杂点在于:每个表格单元格都是独立select,但formSelects用同一个lay-filter名管理,所以得靠data-index或data-id区分上下文,否则编辑A行时可能把B行的值也刷掉了——这事容易被忽略,得在templet里给每个select加唯一id,再用formSelects.render('roleSelect'+rowId)隔离实例。











