LayUI表格插入可输入的下拉框

最近在做公司的项目，有需求需要选择下拉，下拉完之后可以输入值。废话不多说，主要思路为使用HTML5的dataList标签。

主要以下步骤：
1 创建表格

<form class="layui-form" action="">
    <div class="layui-form-item" id="tablePart">
        <label class="layui-form-label">表格</label>
        <div class="layui-input-block">
            <table class="layui-hide" id="test" lay-filter="test"></table>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>
<script src="../layui-v2.6.8/layui/layui.js"></script>

2.设置表格列属性，监听input框输入，结束之后将数据刷入 表格的table.cache属性中

layui.use(['table','jquery'], function () {
        var table = layui.table
            , form = layui.form
        ,$ = layui.$;
        //需要动态设置的datalist属性
        let forArr = ['field1', 'field2']
        table.render({
            elem: '#test',
            data: [{
                id: 1,
                username: '张三'
            },
                {
                    id: 2,
                    username: '李四'
                }],
            cellMinWidth: 80
            , cols: [[
                , {field: 'id', title: 'ID', width: 100, unresize: true, sort: true}
                , {
                    field: 'username', title: '用户名', templet: function (data) {
                        let inputStr = '<input type="text" name="userInput" lay-verify="userInput" list="nas" autocomplete="off" class="layui-input">';
                        let dataList = '<datalist id="nas">'
                        let options  = ''
                        forArr.forEach((a)=>{
                            options+='<option value=\"'+a+'\">'+a+'</option>'
                        })
                        console.log('options============',options)
                        return inputStr+dataList+options+'</datalist>'
                    }
                }
            ]]
            , page: true
        });
        //监听提交 此处思路主要为拿到表格div下 的所有input 然后用input框的值替换到表格行数据中的属性
        form.on('submit(demo1)', function(data){
            data.field.tablesdata = table.cache.test

            let inputs = $('#tablePart input')
            for (let i = 0; i < table.cache.test.length; i++) {
                let tableInput =  table.cache.test[i]
                let inputVal = inputs[i].value
                tableInput.username = inputVal
            }
            return false;
        });
    });