layui 数据表格下拉框_LayUi数据表格中嵌套下拉框

layui嵌套下拉框实用方法(附效果图)

在做项目时遇到一个问题，在layui 的数据表格table里面如何做一个下拉框呢？效果图如下：

这样的效果想必是最理想的了

思路分析：

我们可以通过layui的表单监听的方式实现效果

form.on('select(stateSelect)',function(){});

接下来我就直接开诚布公，放源码

首先：我们设置一下下拉框的样式，进行美化一下

/* 设置下拉框的高度与表格单元相同 */

td .layui-form-select {

margin-top: -10px;

margin-left: -15px;

margin-right: -15px;

}

其次：我们在表单的状态字段那一栏设置下拉框

, {

field: 'status'

, title: '状态'

, templet: function (d) {

if (d.status == 2) {

return '已完成';

} else {

return '' +

' 待支付' +

' 待服务' +

' 已完成' +

'';

}