layui数据表格表头中嵌入下拉，点击搜索时出现下拉

点击价格后的搜索图标表格变化

layui.use(['form', 'table','laytpl', 'xmSelect'], function () {
	 var form = layui.form, 
        table = layui.table,
        laytpl = layui.laytpl,
        xmSelect = layui.xmSelect;
        
        //表头
    var tabChangeCol = [[
        {type: 'numbers', title: '序号', align: 'center', width:4 + '%'},
        {field: 'goodsUrl',  title: '商品主图', width:8 +'%', align: 'center',
            templet:function(d){
                return '<img class="dialog-show-img" src="'+d.goodsUrl+'" max-width="200">';
            }
        }
        {field: 'sell', align: 'center',width:20 +'%', title: `客户<svg t="1672993958443"  class="icon searchSellIcon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="674" width="18" height="18"><path d="M490.666667 810.666667C315.733333 810.666667 170.666667 665.6 170.666667 490.666667S315.733333 170.666667 490.666667 170.666667 810.666667 315.733333 810.666667 490.666667 665.6 810.666667 490.666667 810.666667z m0-42.666667c153.6 0 277.333333-123.733333 277.333333-277.333333S644.266667 213.333333 490.666667 213.333333 213.333333 337.066667 213.333333 490.666667 337.066667 768 490.666667 768z m264.533333-42.666667l119.466667 119.466667-29.866667 29.866667-119.466667-119.466667 29.866667-29.866667z" fill="#808080" p-id="675"></path></svg>`
        }
    ]]
})

//调用渲染表格
renderGoodsTable (tabChangeCol ,[])
function renderGoodsTable (tabColData,data) {
    // 政策商品表格
    var insTb = table.render({
        elem: `#table-policy-goods`,
        id: `table-policy-goods`,
        data: data,
        limit: '30',
        page: false,
        skin:'line',
        cols: tabColData, 
        done: function () { 
            layer.closeAll('loading');
        }
    });
    
    //点击表头中的搜索icon
	$(document).on('click','.searchSellIcon',function(){
		//获取到价格表头
        var thDom = $('.policy-container').find(`[lay-id="table-policy-goods"]`).find('.layui-table th[data-field="sell"]');
        //获取到的时价格部分内的价格搜索图标
        var thDomHtml = thDom.children()
        //清空内容
        thDomHtml.empty()
        //向价格表头中增加多选下拉，可以为下拉输入框等多种
        thDomHtml.append(`<div class="search-sell-select"><div class="layui-input-block" id="search-sell-select"></div></div>`)
        //渲染下拉多选组件
        renderSearchSell(policyID)
    })
    //渲染下拉
	function renderSearchSell (policyID) {
        var sellData = [
            {
                seller_name: '公司1',
                sell_uid: '12'
            },
            {
                seller_name: '公司2',
                sell_uid: '13'
            },
            {
                seller_name: '公司3',
                sell_uid: '14'
            },
        ]
        searchSellSelect = xmSelect.render({
            el: `#search-sell-select`,
            data: sellData,
            direction: 'auto',
            prop: {
                name: 'seller_name',
                value: 'sell_uid'
            },
            on: function(data){
                var customerArr = [];
                var sellUidArr = [];
                $.each(data.arr, function (index, item) {
                    customerArr.push(item.seller_name)
                    sellUidArr.push(item.sell_uid)
                });
                customer_str = customerArr.join(',');
                sellUid_str = sellUidArr.join(',');
                form.render('select');
                searchSell(customerArr,sellUidArr,policyID)
            },
        })
    }
    //选择数据时进行操作，无数据时回到表头文字 + icon的形式
    function searchSell (customer,sellUid,policyID) {
        if (sellUid.length > 0) {
        //选择数据时进行操作
           
        } else {
       		 //无数据时回到表头文字 + icon的形式
            var thDom = $('.policy-container').find(`[lay-id="table-policy-goods-${policyID}"]`).find('.layui-table th[data-field="sell"]');
            var thDomHtml = thDom.children()
            thDomHtml.empty()
            thDomHtml.append(`<span>含税供货价<svg t="1672993958443" class="icon searchSellIcon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="674" width="18" height="18"><path d="M490.666667 810.666667C315.733333 810.666667 170.666667 665.6 170.666667 490.666667S315.733333 170.666667 490.666667 170.666667 810.666667 315.733333 810.666667 490.666667 665.6 810.666667 490.666667 810.666667z m0-42.666667c153.6 0 277.333333-123.733333 277.333333-277.333333S644.266667 213.333333 490.666667 213.333333 213.333333 337.066667 213.333333 490.666667 337.066667 768 490.666667 768z m264.533333-42.666667l119.466667 119.466667-29.866667 29.866667-119.466667-119.466667 29.866667-29.866667z" fill="#808080" p-id="675"></path></svg></span>`)
            searchSellSelect.setValue([ ])
            searchSellSelect.getValue()
        }
    }
}