LayUi中動態表格中可以使用 templet自定義列模板 對單元格新增其他元素 ，新增下拉框相對麻煩些，沒有自帶的。

1.新增編輯器

我們使用繫結模版選擇器的方法：

在table.render()中 指定列（cols）的templet屬性，並新增模板的html程式碼，例如：

{ rowspan: 2, title: '新建及改造工作狀態', templet: '#editState' }

    <script type="text/html" id="editState" >
        <select name="editStateS" lay-filter="
 
editStateS" id="editStateS"  data-value = {{d.NewReformStatus}} >  
            <option value="未開工">未開工</option>
            <option value="在建">在建</option>
            <option value="完工">完工</option>
            <option value="已驗收">已驗收</option>
        </select
 
>
    </script>

（使用d.fileName指定欄位，用於繫結已有的值； 另外必須設定lay-filter才可以進行監聽）。

新增後樣式不對，需要自己調整一下樣式使得下拉框與單元格cell剛好合適嵌入，並且需要設定超出長寬時也顯示，否則下拉時不會顯示：

        td .layui-form-select {
            margin-top: -10px;
            margin-left: -15px;
            margin-right: -15px;
        }
        .layui-table-cell {
            overflow: visible 
 
!important;
        }

因為設定了全域性的.layui-table-cell，會影響到其他table元素，比如表頭的th，我這裡表頭原本是自適應寬度、超出隱藏，手動拖動調整寬度的，所以再重設一下表頭超出隱藏：

        .layui-table-view .layui-table th{
            overflow:hidden;
        }

2.監聽下拉框

因為下拉框是屬於form元素，不是屬於table元素，所以監聽方法需要放在layui.use('form'）中，而不是放在layui.use('table'）中

layui.use('form', function () {
            var form = layui.form;
            //監聽下拉框編輯
            form.on('select(editStateS)', function (data) {
                //獲取當前行tr物件
                var elem = data.othis.parents('tr');
                //第一列的值是Guid，取guid來判斷
                var Guid= elem.first().find('td').eq(1).text();
                //選擇的select物件值；
                var selectValue = data.value;
                //這裡的JsonDataInti是我自定義的table中資料的快取資料，下拉資料修改時賦值到這一行快取資料
                for (i = 0; i < jsonDataInit.length; i++) {
                    if (jsonDataInit[i].Guid== Guid) {
                        jsonDataInit[i].NewReformStatus = selectValue; //更新被修改的行資料
                    }
                }
            })
        });

3.已經存在的資料繫結至下拉框：

這裡就又需要放在layui.use('table'）中了，在table.render的done函式中來編寫繫結邏輯：

done: function (res, curr, count) {
                                res.data.forEach(function (item, index) {//根據已有的值回填下拉框
                                layui.each($("select[name='editStateS']", ""), function (index, item) {
                                    var elem = $(item);
                                    elem.next().children().children()[0].defaultValue = elem.data('value');
                                    //elem.val(elem.data('value'));
                                });
                                table.render('select');
                            }

網上看了一些做法是使用elem.val(elem.data('value')); 來進行賦值，但是試了發現並不行，於是查看了一下生成的html程式碼：

不知為何生成了兩個，，一個select標籤、一個input標籤，頁面顯示的是input標籤的內容。所有我這裡改成了修改input中的內容，使用elem.next().children().children()[0].defaultValue = elem.data('value');來進行賦值。

完成的效果：