效果图表格占位 工具栏占位 操作栏占位 dropdown占位 table渲染和dropdown渲染解决思路：用数组来渲染table，新增或删除行之后，更新数组并重新渲染table。css是为了解决dropdown的下拉框嵌入table里var saleList = [] tableIns2 = table.render({ elem: '#myTable' , data: saleList , page: true //开启分页 , cols: [ [ {field: 'number', title: '序号', width: 80, fixed: 'left'}, {field: 'specification', title: '规格', width: 230, templet: '#specDropdown'}, {field: 'specificationName', title: '规格', hide: true}, {field: 'price', title: ' 单价', edit: 'text', width: 130}, {field: 'weight', title: '重量', edit: 'text', width: 130}, {field: 'amount', title: '金额', edit: 'text', width: 130,}, {fixed: 'right', width: '160', title: '操作', toolbar: '#myTableBar'} ] ], css: [ // 设置单元格样式 // 取消默认的溢出隐藏，并设置适当高度 '.layui-table-cell{height: 50px; line-height: 40px;}', '.layui-table-cell .layui-colorpicker{width: 38px; height: 38px;}', '.layui-table-cell select{height: 36px; padding: 0 5px;}' ].join('') , toolbar: '#myTableToolbar' , done: function (res, curr, count) { var options = this; table.getRowData = function (elem) { var index = $(elem).closest('tr').data('index'); return table.cache[options.id][index] || {}; }; $.ajax({ url: "/dataProClass/getParentList?itemType=8&idLength=4", type: "get", dataType: "json", headers: {"Content-Type": "application/json;charset=UTF-8", "authorization": token}, success: function (res) { dataSpec = res.data; let data = [] for (let i = 0; i < dataSpec.length; i++) { let item = {}; item.id = dataSpec[i].id; item.title = dataSpec[i].item_name data.push(item); } dropdown.render({ elem: '.dropdpwn-demo', // trigger: 'hover', // 此处的 data 值，可根据 done 返回的 res 遍历来赋值 data: data, click: function (obj) { var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引) this.elem.find('span').html(obj.title); // 更新数据中对应的字段 data.specification = obj.id; data.specificationName = obj.title; } }); } }); } });表头工具//表头工具 table.on('toolbar(myTable)', function (obj) { switch (obj.event) { case 'addRow': var oldData = table.cache['myTable']; let newData = {number: oldData.length + 1}; oldData.push(newData) table.reload('myTable', {data: oldData}); console.log(oldData); break; case 'deleteRow': var oldData = table.cache['myTable']; let number = obj.data.number; oldData = oldData.filter(x => x.number != number); table.reload('myTable', {data: oldData}); break; } });操作栏事件table.on('tool(myTable)', function (obj) { var data = obj.data; switch (obj.event) { case 'deleteRow': var oldData = table.cache['myTable']; let number = obj.data.number; oldData = oldData.filter(x => x.number != number); for (let i = 0; i < oldData.length; i++) { oldData[i].number = i + 1; } table.reload('myTable', {data: oldData}); break; } });编辑回显这里要注意，data取自obj.data，里面会带有一个$ref属性，不删除直接提交后台会报json的parse错误，所以需要删除。let myTableData = data.detailList; for (let i = 0; i < myTableData.length; i++) { myTableData[i].number = (i + 1); delete myTableData[i].$ref; } table.reload('myTable', {data: myTableData});