layui中select切换数据_LayUi- 动态表格table中下拉框Select的设置和监听

LayUi中动态表格中可以使用 templet自定义列模板 对单元格添加其他元素 ，添加下拉框相对麻烦些，没有自带的。

1.添加编辑器

我们使用绑定模版选择器的方法：

在table.render()中 指定列(cols)的templet属性，并添加模板的html代码，例如：

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

未开工

在建

完工

已验收

(使用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，我这里表头原本是自适应宽度、超出隐藏，手动拖动调整宽度的，所以再重设一下表头超