layui table的表头无法加载xm-select下拉框

1，在table外加入 div ，xm-select可以渲染出来，但是把div放在layui table的表头toolbarDemo上就无法渲染了。
2，使用layui excel导出table时，打开excel发现最右边多出一列，怀疑是不是把滚动条这一栏也导出了。

 <!-- 数据表格开始 -->
  <table class="layui-hide" id="test1" lay-filter="test1"></table>
  
  <script type="text/html" id="toolbarDemo">
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-range-datetime" placeholder=" - " style="width:250px; " autocomplete="off">
      </div>
      <div class="layui-input-inline" style="width:200px;" id="goodsname"></div>

      <button type="button" class="layui-btn layui-btn-primary" id="searchBtn" lay-filter="search" lay-event="search" style="border-color:white;"><i class="iconfont" style="color:blue;">&#xe6ac;</i></button>
      <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="exportFile" lay-event="exportFile" style="border-color:white;width:45px;" title="导出excel"><i class="iconfont"style="color:white;" >&#xe714;</i></button> 
</script>

<script src="../layui/layui.all.js" charset="utf-8"></script>
  <script>
    layui.use('table', function () {
      var table = layui.table;
      var form = layui.form;
      var $ = layui.jquery;
    
      var tagIns1 = xmSelect.render({
    el: '#goodsname', // div的id值
    toolbar: { // 工具条【‘全选’，‘清空’】
      show: true, // 开启工具条
      showIcon: false, // 隐藏工具条的图标
    },
    tips: '选择物料类型', // 让默认值不是“请选择”，而是“选择。。”
    theme: { color: '#558ff5' },
    filterable: false, // 开启搜索模式，默认按照name进行搜索
    paging: false, // 启用分页
    pageSize: 3, // 每页的数据个数
    data: [ // 默认是name（相当于我们常传的value值）和value(相当于我们常传的id)
        {name: 'A', value: 'A'},
        {name: 'B', value: 'B'},
        {name: 'C', value: 'C'},
    ]
  }); 

      var tableIns = table.render({
        elem: '#test1'
        ,url: './data.php' //数据接口
        ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        ,defaultToolbar: ['filter', 'print']
        ,title:''
        ,loading:true
        ,height:'full-30'
        ,cols: [
          [
            {field: 'id', title: 'ID',sort: true, totalRowText: '合计：'}
      ,{field: 'name', title: 'name',sort: true, filter: true}
          ]
        ],
        where:{
        }
        , page: false          
      });

       //头工具栏事件，添加，批量删除
      table.on('toolbar(test1)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        var data = checkStatus.data;
        console.log(data);
        console.log(checkStatus);
        switch (obj.event) {
          case 'exportFile':
            exportFile();
          break;
          case 'refresh':
          table.reload('test1',{
                    url: './data.php'});
          laydate.render({
            elem: '#ID-laydate-range-datetime',//选择器结束时间
            type: 'datetime',
            range: true,
            min:"1970-1-1"
        });  
          break;
      //查询事件
    case 'search':
                   let goodsname= $('#searchReload').val();
                 let date = $('#ID-laydate-range-datetime').val();
                 var str = date;
                 var dates = str.split(' - ');

                 var start = dates[0];
                 var end = dates[1];
                if (sn =="" && date ==""){
                       layer.msg("请输入查询信息！");
                       return false;
                   }
                table.reload('test1',{
                    url: './order_material_call_search_data.php',
                        loading:true,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: {
                        goodsname: goodsname,
                        startt: start,
                        endd:end
                    }
                });    
                $('#searchReload').val(sn).select();//重加载后，重新赋值上次搜索的内容
                $('#ID-laydate-range-datetime').val(date);
                laydate.render({
            elem: '#ID-laydate-range-datetime',//选择器结束时间
            type: 'datetime',
            range: true,
            min:"1970-1-1"
        });
         break;         
        };
      });
      
      //excel export
      function exportFile() {
            var id="test1";
            //根据传入tableID获取表头
            var headers=document.querySelector("body > div.layui-form.layui-border-box.layui-table-view > div.layui-table-box > div.layui-table-header > table > thead");
            var htrs = Array.from(headers.querySelectorAll('tr'));
            var titles = {};
            for (var j = 0; j < htrs.length; j++) {
                var hths = Array.from(htrs[j].querySelectorAll("th"));
                for (var i = 0; i < hths.length; i++) {
                    titles['data-field' + i] = hths[i].innerText;
                }
            }
            //根据传入tableID获取table内容
            var bodys=document.querySelector("body > div.layui-form.layui-border-box.layui-table-view > div.layui-table-box > div.layui-table-body.layui-table-main > table > tbody");
            var btrs = Array.from(bodys.querySelectorAll("tr"))
            var bodysArr = new Array();
            for (var j = 0; j < btrs.length; j++) {
                var contents = {};
                var btds = Array.from(btrs[j].querySelectorAll("td"));
                for (var i = 0; i < btds.length; i++) {
                    for (var key in titles) {
                        //修改:默认字段data-field+i,兼容部分数据表格中不存在data-field值的问题
                        var field = 'data-field' + i;
                        if (field === key) {
                            //根据表头字段获取table内容字段
                            contents[field] = btds[i].innerText;
                        }
                    }
                }
                bodysArr.push(contents)
            }
            //将标题行置顶添加到数组
            bodysArr.unshift(titles);
            //导出excel
            LAY_EXCEL.exportExcel(bodysArr, '明细<?PHP echo date('Y-m-d_his',time()); ?>.xlsx', 'xlsx')
        };
    });
  </script>
    
    
    <script>
    layui.use('laydate', function(){ // 日期时间范围
        var laydate = layui.laydate;
        var Datefiler = {        
            elem: '#ID-laydate-range-datetime',//选择器结束时间
            type: 'datetime',
            range: true,
            min:"1970-1-1"
      }
      laydate.render(Datefiler);
    });
</script>

【以下回答由 GPT 生成】

问题标题: 如何在layui table的表头toolbarDemo上加载xm-select下拉框？

问题描述:

在使用layui的table组件时，我希望在表头的toolbarDemo中加载xm-select下拉框，但是无法成功渲染。以下是我尝试过的代码：

<!-- 数据表格开始 -->
<table class="layui-hide" id="test1" lay-filter="test1"></table>

<script type="text/html" id="toolbarDemo">
  <div class="layui-input-inline">
    <input type="text" class="layui-input" id="ID-laydate-range-datetime" placeholder=" - " style="width:250px;" autocomplete="off">
  </div>
  <div class="layui-input-inline" style="width:200px;" id="goodsname"></div>

  <button type="button" class="layui-btn layui-btn-primary" id="searchBtn" lay-filter="search" lay-event="search" style="border-color:white;">
    <i class="iconfont" style="color:blue;">
      &#xe6ac;
    </i>
  </button>
</script>

我还有一个问题是，在使用layui的excel导出功能时，打开导出的excel文件后发现最右边多了一列，怀疑是滚动条那一列也被导出了。请问有什么解决方法吗？

解决方案:

问题一: 如何在layui table的表头toolbarDemo上加载xm-select下拉框？

在layui的table表头的toolbarDemo中加载xm-select下拉框有以下几个步骤:

  1. 在HTML文件中引入xm-select的相关资源文件：
<link rel="stylesheet" href="path/to/xm-select.css">
<script src="path/to/xm-select.js"></script>
  1. 在表头的toolbarDemo中定义一个div元素，用于渲染xm-select下拉框：
<div class="layui-input-inline" style="width:200px;" id="selectDemo"></div>
  1. 在JavaScript代码中，使用layui的table.render方法渲染表格，并在toolbar中使用xmSelect方法渲染xm-select下拉框：
layui.use(['table', 'xmSelect'], function(){
  var table = layui.table;
  var xmSelect = layui.xmSelect;

  // 渲染表格
  table.render({
    elem: '#test1',
    url: 'data.json',
    toolbar: '#toolbarDemo',
    // ... // 其他配置项
    });

  // 渲染xm-select下拉框
  xmSelect.render({
    el: '#selectDemo',
    data: [{
      name: 'Option 1',
      value: 'option1'
    }, {
      name: 'Option 2',
      value: 'option2'
    }, {
      name: 'Option 3',
      value: 'option3'
    }],
    // ... // 其他配置项
  });
});

请注意，以上代码中的路径和配置项需要根据实际情况进行调整。

问题二: excel导出功能导致最右边多出一列的问题

在使用layui的excel导出功能时，可能会导致最右边多出一列的问题。这可能是由于表格的宽度设置不当引起的。可以尝试以下几种方法来解决这个问题：

  1. 检查表格是否有额外的宽度设置，例如使用了固定列（fixed）或自定义列宽度（width）等。适当调整或删除这些设置，以使表格的宽度适应导出时的要求。

  2. 检查导出的样式是否正确设置。可以使用layui的table.exportFile方法中的参数设置样式，例如可以尝试使用cols: [[ {field:'fieldName', title:'Field Name', width:100} ]]设置列宽度。

  3. 检查样式是否受到其他CSS样式的影响，可以尝试设置自定义的excel导出样式来解决问题。代码示例:

table.exportFile('test1', data, 'xls', 'test_table', {
  extend: 'excelHtml5',
  title: 'Test Table',
  filename: 'test_table',
  sheet: {
    title: 'Sheet1',
    cssRules: `
      .excel-export .layui-table-cell { white-space: normal; }
      .excel-export-table { width: 100%; }
      .excel-export-table td { white-space: nowrap; }
    `
  }
});

以上是对问题的具体解答，如果还有其他问题，请继续提问。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^