起因：使用了webman-admin表單構(gòu)建工具做了個(gè)單選組件后發(fā)現(xiàn)新增正常的，而編輯時(shí)發(fā)現(xiàn)無(wú)法根據(jù)表中的值進(jìn)行同步checked。

解決過(guò)程

先查看了下update頁(yè)生成的代碼，表單初始化化時(shí)會(huì)將拿到的數(shù)據(jù)根據(jù)那么進(jìn)行val賦值。
而我們的radio組件每一個(gè)name都是一致的，很可能都會(huì)賦值為表中的值。
新增了一條后，數(shù)據(jù)庫(kù)back_button字段的vlaue為2。
進(jìn)行控制臺(tái)打印，果然4條input的value全部為2。
這就好辦了，因?yàn)閯偤梦业膙alue就是0,1,2,3這樣，剛好和數(shù)組默認(rèn)下標(biāo)一致。
拿到隨便拿到一個(gè)input的value，這里用的0

                    // 獲取所有的input
                    let back_buttons = layui.$("input[name='back_button']");
                    // 拿到第一個(gè)的value
                    value = parseInt(back_buttons[0].value);

然后將數(shù)組中的下標(biāo)為value值的input添加 checked選中狀態(tài)

back_buttons.eq(value).prop("checked", true);

之后通過(guò)for循環(huán)，將4個(gè)input中的value值還原為0,1,2,3。

                    // 還原value值
                    for(let i = 0; i < back_buttons.length; i++){
                        back_buttons[i].value = i;
                    }
                    // 重新渲染
                    layui.form.render();

最后加一條監(jiān)聽radio選中狀態(tài)

                    //  監(jiān)聽radio選中狀態(tài)
                    layui.form.on("radio(back_button)", function (data) {
                        layui.$('input[name="back_button"]').val(data.value);
                    });

因?yàn)閷?duì)layui不是太熟，還是用原生js的思路處理，如果有更優(yōu)雅或者已經(jīng)封裝好的方式請(qǐng)留言指教。

下面貼下全部代碼

html代碼

            <div class="layui-form-item">
                <label class="layui-form-label">返回按鈕</label>
                <div class="layui-input-block">
                    <input type="radio" name="back_button" value="0" title="隱藏" class="layui-input">
                    <input type="radio" name="back_button" value="1" title="H5" class="layui-input">
                    <input type="radio" name="back_button" value="2" title="返回鏈接" class="layui-input">
                    <input type="radio" name="back_button" value="3" title="自定義" class="layui-input">
                </div>
            </div>

js代碼

                // 字段 返回按鈕 back_button
                layui.use(['form'], function () {
                    // 獲取所有的input
                    let back_buttons = layui.$("input[name='back_button']");
                    // 拿到第一個(gè)的value
                    value = parseInt(back_buttons[0].value);
                    // 設(shè)置順訊為value值的input為checked狀態(tài)
                    back_buttons.eq(value).prop("checked", true);
                    // 還原value值
                    for(let i = 0; i < back_buttons.length; i++){
                        back_buttons[i].value = i;
                    }
                    // 重新渲染
                    layui.form.render();
                    //  監(jiān)聽radio選中狀態(tài)
                    layui.form.on("radio(back_button)", function (data) {
                        layui.$('input[name="back_button"]').val(data.value);
                    });
                });