当前位置：首页 > news >正文

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

news 2025/8/2 11:22:49

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>

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