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>

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