Layui表格手动添加一行和删除一行

style
这里下拉框的功能是可以的，但是在显示的时候有问题，如果下拉框的高度超出table，虽然加了下面的代码，下拉框不会被遮挡，但是会影响table的布局，这个我也不会，有会的大佬教教我

这个是让table里的下拉框不被遮挡
        .layui-table-cell {
            overflow: visible !important;
        }

         .layui-table-box {
            overflow: visible;
        }

        .layui-table-body {
            overflow: visible;
        }

         td .layui-form-select {
            margin-top: -10px;
            margin-left: -15px;
            margin-right: -15px;
        }

css代码：

下拉框

操作按钮
这个我直接放到表格里了，不怎么好看，可以自己抽离出来

js代码：
首先要对表格渲染下

layui.use('table', function () {
            var table = layui.table,
            form = layui.form;
            //展示已知数据
            tables = table.render({
                elem: '#demo'
                , width: 500
              , cols: [[ //标题栏
                  { type: 'checkbox', fixed: 'left', hide: true }
                , { fixed: 'left', toolbar: '#bar', title: '操作', width: 180, align: 'center' }
                , { field: 'LocationID', title: '仓位编码', width: 158, templet: '#selectDictName', align: "center" }
                , { field: 'InventoryQuantity', title: '拆分数量', edit: 'text', width: 158, align: "center" }
              ]]
                //这里就是一开始渲染就添加一个空的一行数据，或者添加一下数据也可以
              , data: [{ "LocationNumber": "", "InventoryQuantity": "", "LocationID":0 }]
              , done: function (res, curr, count) {
              //下拉框绑定
                  $.ajax({
                      type: "post",
                      url: "SelectLocations",
                      dataType: "json",
                      async: false,
                      success: function (data) {
                          for (k in data) {
                              $("select[name='dictName']").append('' + data[k].text + '');
                          }
                      }
                  });
                  //根据已有的值回填下拉框
                  layui.each($("select[name='dictName']"), function (index, item) {
                      var elem = $(item);
                      elem.val(elem.data('value'));
                  });
                  form.render('select');
                }
              , even: true
            });
            //监听添加一行和删除一行操作
            table.on('tool(demo)', function (obj) {
                //var data = obj.data;
                if (obj.event === 'edit') {
                    var Data = table.cache["demo"];
                    var datas = {
                        "LocationNumber": ""
                        , "InventoryQuantity": ""
                        , "LocationID": 0
                    }
                    Data.push(datas);
                    tables.reload({
                        data: Data
                    });
                } else if (obj.event === 'del') {
                    var Data = table.cache["demo"];
                    if (obj.tr.data('index') != 0) {
                        Data.splice(obj.tr.data('index'), 1)//根据索引删除当前行
                        tables.reload({
                            data: Data
                        });
                    }
                }
            });
            //这是监听可编辑的
            table.on('edit(demo)', function (obj) {
                //console.log(obj.tr.data("index"));//获取当前行索引
                //data = obj.data //得到所在行所有键值
            });
             //这是监听下拉框改变
            form.on('select(dictName)', function (data) {
                var selectElem = $(data.elem);
                var tdElem = selectElem.closest("td");
                var trElem = tdElem.closest("tr");
                var tableView = trElem.closest(".layui-table-view");
                table.cache[tableView.attr("lay-id")][trElem.data("index")][tdElem.data("field")] = data.value;
              
            });
        });