如何在w2ui表单的列表字段中预选中首个选项？

嘿，这个需求我之前做项目时刚好遇到过，给你分享两种实用的实现方式，你可以根据自己的场景来选：

方法一：在列表加载完成的回调中设置（推荐） #

因为你的列表是通过AJAX加载的，最稳妥的方式就是在列表数据加载完成的onLoad回调里处理选中逻辑，这样能确保数据已经存在，不会出现选空的情况。

假设你的表单ID是myForm，列表字段的名称是myList，代码示例如下：

// 初始化w2ui表单
$('#myForm').w2form({
    fields: [
        {
            name: 'myList',
            type: 'list',
            options: {
                url: '/your-ajax-data-url', // 你的AJAX数据接口地址
                onLoad: function(event) {
                    // 拿到列表的第一个项
                    const firstItem = this.items[0];
                    if (firstItem) {
                        // 选中该项
                        this.select(firstItem.id);
                        // 同步选中值到表单的记录对象（这步很重要，不然表单提交时拿不到选中值）
                        w2ui['myForm'].record.myList = firstItem.id;
                    }
                }
            }
        }
    ]
});

方法二：手动触发选中（适用于数据已加载后的场景） #

如果你的列表数据已经通过其他方式加载完成，之后需要手动触发选中第一个项，可以直接获取列表组件实例来操作：

// 获取表单中的列表组件实例
const listComponent = w2ui['myForm'].get('myList');
// 检查列表是否有数据，有则选中第一个项
if (listComponent.items.length > 0) {
    listComponent.select(listComponent.items[0].id);
    // 同步选中值到表单记录
    w2ui['myForm'].record.myList = listComponent.items[0].id;
}

注意事项 #

• 一定要确保列表数据完全加载完成后再执行选中操作，不然items数组是空的，会导致选中失败；
• 选中后记得同步值到表单的record对象，否则表单提交时无法获取到选中的项ID。

内容的提问来源于stack exchange，提问作者Gabor