欢迎转载，转载需带着文章出处链接~~，希望我的经验能帮到你，有问题可以点我头像加我微信 本文章仅对遇到的问题提供一个解决思路，对于迫切想要实现功能效果的人来说，希望能稍微沉下心观看，或者直接观看思路部分，或者直接观看完整代码 本文章的代码并不能直接拿来使用，完整代码只是本篇文章解决的问题需要用到的代码，如果直接使用可能会有报错，只要修改一下代码既可使用~~~

jqxgrid组件下拉表头过滤自定义方案

主要提供一个在vue框架下操作dom节点，并且dom节点是vue组件生产的

1、创建一个vue组件

1.1、使用div创建一个面板，写一个ref，方便创建下拉dom 1.2、给一个类，这个类使用display：none;使用该组件之前，将这个组件隐藏，后续创建dom的时候删掉即可 1.3、创建组件，如果是antdesign的下拉组件，参考api的挂载方法，可以通过传 1.4、在组件的同级下写一个div兄弟元素，写一个id，将组件挂载到这个div下

• 解决一旦刷新面板后，无法加载下拉的bug递挂载面板的id挂载到对应的位置，详细看最后

2、将jqx的表头修改成自定义过滤的方法

3、创建buildFilterPanel方法

3.1、声明变量接受this指针 3.2、创建文字，“行过滤条件：”，并添加到面板上

• 这里是为了保证跟jqxgrid普通过滤保持一致 3.3、创建一个正常的div元素，将vue组件挂载到该div下
• 最好给div一个id，这是因为下拉容易出现冒泡的问题，下拉面板别挂载在body下
• 因为bug原因，参考1.4做调整
• 这样当操作下拉面板的时候，导致filter过滤面板判断点击不是在该面板下，会将filter过滤面板收起
• 另：如果要对多个表头进行自定义过滤，只使用一个方法，可以直接在datafield下进行判断，并决定挂载哪个vue组件 3.4、如果存在下拉的情况下，进行冒泡的阻止
• 如果存在下拉，一般是需要阻止冒泡的，需要3.3的配合，同时要将该点击的区域挂载到div下，根据3.3创建的div的id

//阻止冒泡事件
divContainer.addEventListener("click", function(e) {
  window.event ? window.event.cancelBubble = true : e.stopPropagation();
  return false;
}, false);

3.5、创建底部的两个按钮，过滤和清除

• 参考官方文档进行添加即可
• 注意修改面板和获取的值

4、如果使用antdesign的下拉组件，参考select组件的getPopupContainer属性

4.1、找到多次封装的组件（主要是找到使用这个组件的位置） 4.2、添加 :getPopupContainer ="getPopupContainer" 属性 4.3、接受父组件传的参数，如docid

• props接受这个参数，给一个默认值
• 然后判断docid是否存在，如果docid等于给定的默认值，则挂载到body下
• 否则挂载到docid上
• 代码如下：

getPopupContainer(){
  if(this.docid =="null"){
    return document.body;
  }
  return document.getElementById(this.docid);
}