Devextreme 将DxFilterRow改为回车触发筛选

首先我们需要了解applyFilter，根据官方文档对applyFilter的介绍，它有两种触发状态：默认为'auto'；另一种为'onClick'。

1.'auto'应用

<DxFilterRow
        :visible="true"
        :apply-filter="auto"
      />

自动筛选.png

这种筛选触发方式有一个弊端，如图所示，筛选的字段过长时，输入法还未完成提交，页面早已进行筛选，非常不方便，当数据量过大时会给后端造成过大压力。

2.'onClick'应用

<DxFilterRow
        :visible="true"
        :apply-filter="onClick"
      />

点击筛选.png

这种筛选触发方式有效解决上一种方式带来的问题，这种方式在输入筛选内容后需要手动点击右上方的筛选方法，也存在着不方便的弊端，那么我们可不可以实现在筛选时输入筛选内容点击回车键直接筛选呢？

实现点击回车键触发筛选

（1）实现思路：

利用applyFilter="onClick",当点击回车键时触发绑定在右上角筛选按钮的点击事件具体实现过程太过繁琐简略表达就是利用Devextreme中的onEditorPrepared通过className获取到筛选按钮的DOM再触发点击事件具体代码如下

//html
 <DxDataGrid
 @editor-preparing="onEditorPreparing"
></DxDataGrid>
//javascript
 /**
     * @description: 回车触发筛选
     * @param {*} e
     * @return {*}
     */
    onEditorPreparing (e) {
      if (e.parentType == 'filterRow') {
        e.editorOptions.onEnterKey = function (arg) {
          // console.log(e.element.childNodes[0])
          // 触发点击事件
          if (e.element.childNodes[0].getElementsByClassName('dx-apply-button') != undefined) {
            e.element.childNodes[0].getElementsByClassName('dx-apply-button')[0].dispatchEvent(new Event('dxclick'));
          }
        }
      }
    },
//css隐藏筛选按钮
.dx-datagrid-header-panel {
  display: none;
}

这样输入筛选内容后，点击回车键直接触发筛选。

码字不易如果有用请点个赞！！