DataGridXL中快速搜索单元格和底部全屏模式区域隐藏

news2025/11/4 19:21:21

DataGridXL表格是在2020年发布，DataGridXL在设计时就考虑到了性能。提供最快、最简单、最可靠的数据网格。DataGridXL支持所有常用所有的浏览器，为 Web 应用程序提供类似于 Microsoft Excel 的体验，它支持前端框架有Vue、React、Angular等。

功能列表：

调整列大小
重新排序列
重新排序行
(Un)冻结行
(un)冻结列
搜索单元格
多范围选择
(un)隐藏行
隐藏列
全屏模式

尚未提供功能：

合并单元格
数据透视表
嵌套行/列标头
树结构
分页

初始样式如下：

一、官方地址

DataGridXL官网地址：DataGridXL: Excel-like Experience for Web Apps

Vue项目案例文档：DataGridXL: Excel-like Experience for Web Apps

DataGridXL还提供了非常灵活演示功能，不用创建项目也可以配置相应参数，并且提供模拟控制台执行相应功能函数，执行提供的丰富功能函数和数据展示。

API地址：API - DataGridXL: Options‘

二、项目创建与安装

这里以Vue项目为例，使用Vue CLI来构建我们的初始Vue应用程序。这里主要讲DataGridXL 2界面调整，不详细讲解Vue项目创建。创建项目命令如下：

vue create my-vue-project
cd my-vue-project
npm run serve

开始安装DataGridXL 2，命令如下：

npm install @datagridxl/datagridxl2

创建Vue项目文件，并引用DataGridXL 2，代码如下：

<template>
  <div class="wrapper-dgxl">
    <div ref="dgxl" class="grid"></div>
  </div>
</template>

<script>
import DataGridXL from "@datagridxl/datagridxl2";

export default {
  name: "DataGrid",
  data() {
    return {};
  },
  computed: {
    dgxlOptions() {
      return {};
    },
  },
  mounted: function () {
    const dgxlObj = new DataGridXL(this.$refs.dgxl, this.dgxlOptions);
  },
};
</script>

<style>
.grid {
  height: 400px;
}
</style>

此时我们会发现，页面默认是这样的，多了头部快速搜索单元格和底部区域，如下图：

三、只保留表格区域

在实际开发在，我们只需要中间表格部分，顶部快速搜索单元格和底部全屏模式区域如何隐藏掉呢？刚开始也很困扰我，在文档并未看到相关讲解，后来通过实例发现可以在配置参数上作调整。

在dgxlOptions中将topBar和bottomBar数组清空即可，代码如下：

export default {
  name: "DataGrid",
  data() {
    return {};
  },
  computed: {
    dgxlOptions() {
      return {
        //清除顶部区域
		topBar: [],
        //清除顶部区域
        bottomBar: [],
	  };
    },
  },
  mounted: function () {
    const dgxlObj = new DataGridXL(this.$refs.dgxl, this.dgxlOptions);
  },
};
</script>

现在只剩下表格部分了，如下图：