layui 数据表格下拉框_layui学习——数据表格嵌套下拉列表，并实现动态更新

layui学习——数据表格嵌套下拉列表，并实现动态更新

项目中有些字段的数据为固定的几个值，这些字段在数据表格中显示为汉字，但在数据库中以数字形式存储，例如：仓库属性(0:普通仓/1:检验仓/2:报废仓)，要对这些字段进行数据表格行内编辑有些麻烦。

因此，在数据表格中嵌套下拉列表是一个比较好的方案。

步骤1：创建数据表格嵌套下拉列表样式

使用layui的template功能，先创建一个下拉列表：

script type="text/html" id="WHAttr"

select lay-filter='table' lay-verify=''

option value="0"普通仓/option

option value="1"检验仓/option

option value="2"报废仓/option

/select

/script

以仓库属性字段为例。我在项目中使用的是自动渲染的方式渲染表格的，因此需要在仓库属性的th标签中加入lay-data属性：

th lay-data="{field:'WHAttr',templet:'#WHAttr'}"仓库属性/th

这样就在数据表格中嵌套一个下拉列表了，但样式好像不对，看起来怪怪的，下拉框与单元格大小不一致，下拉框也被遮挡了。

于是就要修改样式了：

style

/*使下拉列表框不被遮挡*/