layui table组件中增加select编辑控件

在使用table组件时，有时需要能直接在table的单元格中编辑数据，原生是提供普通的单行文本编辑框的。只需要在列定义中增加属性：edit:'text'。在一些特定应用下，提供select的编辑方式更友好。

这就需要自己变通的实现了。在列的定义中可以使用模板：templet。而这种方式又分两种：

直接复值模板的id："#[模板id]"；再就是把templet当成一个列渲染函数，函数里返回视图数据即可。

如果你的select的option是固定的，不需要从后台动态获取的。那可以直接用：templet:"#tmpid"就可以。模板定义中会传入表格当前行的数据对象。再和固定的option的value比较来设置默认选中项。

如果select的option是从后台动态加载的。就需要注意两点。1：要在加载option数据后再渲染表格；2：根据当前行的数据设置默认选中项。基于此，templet配置为渲染函数。而不是直接配置为一个模板id（这种方式只传入了当前行的数据）。在渲染函数内结合从后台加载的option数据和当前行数据，进行option的渲染和默认项的设置。

function renderTempletColumn(recordData){
                      var rst=null;
                      laytpl(editor_select.innerHTML).render({list:optionsData,defval:recordData.workArea}, function(html){
                          rst=html;
                      });
                      return rst;
                  }

 {templet:renderTempletColumn}

注：代码中的optionsData就是提前从后台加载的option选项数据，和传入的当前行数据：recordData 合并成一个对象为模块提供数据，手动渲染模板后，返回视图数据即可。

还需要解决的一问题是，布局。直接像上面操作，select是加到对应位置了，但未填充满且位置偏下，下拉框内容无法显示。这是需要调整下样式。

.layui-table-cell {
            overflow: visible;
        }
        
        .layui-table td[data-field='workArea']{
           padding:0px;
        }
        
        .layui-table td[data-field='workArea'] .layui-table-cell{
            padding:0px;
            height:100%;
        }