一、前言

最近在做一个线上订货平台的项目，用户之前都是使用传统的Excel表格完成工作数据的提交和汇总，工作效率非常低。

希望我们能将历年的各项数据导入系统，之后可以参照历年数据格式，能直接在系统上创建新的工作，并进行管理。

在项目中，我们需要尽可能的将数据以表格的形式呈现，从而最大程度还原用户熟悉的工作操作。

重新开发一套表格组件所使用的时间和精力相对来说是非常大的，为了能尽快将成果完美的呈现给用户，我们选择了AG-Grid这个号称最强的表格组件。

接下来简单记录下AG-Grid的使用经验，方便大家参考。

二、介绍

AG-Grid是一个高级数据网格，适用于JavaScript / TypeScript应用程序。AG-Grid没有其他依赖项，不需要提前加载 Vue 或 React 或 Angular，甚至不使用 JQuery、Undercore 或 LoDash。没有依赖性意味着AG-Grid可以与任何框架一起工作。

它是一种功能强大、灵活且具有高度可定制性的表格解决方案，提供了丰富的特性，如排序、过滤、分组、编辑、无限滚动、行拖动、分组等，甚至可以和桌面Excel文件之间进行复制粘贴，多选数据后即时生成图表等强大功能。

且开源免费！！！

三、获取

  1. Github 地址：https://github.com/ag-grid/ag-grid
  2. 官方文档地址：https://www.ag-grid.com/
  3. 中文文档地址：https://www.itxst.com/ag-grid/tutorial.html

1. Vue环境

  1. 使用 npm 安装 ag-grid-vue3
    npm install ag-grid-vue3
  2. 引入并注册到组件
    <template></template>

<script>
import { ref } from 'vue';
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import { AgGridVue } from "ag-grid-vue3";

export default {
  name: "App",
  components: {
    AgGridVue,
  },
  setup() {},
};
</script>
  3. 定义行列数据
    setup() {
  // 行数据：要显示的数据
  const rowData = ref([
    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
    { make: "Ford", model: "F-Series", price: 33850, electric: false },
    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
  ]);

  // 列定义：定义要显示的列
  const colDefs = ref([
    { field: "make" },
    { field: "model" },
    { field: "price" },
    { field: "electric" }
  ]);

  return {
    rowData,
    colDefs,
  };
},
  4. 使用 Grid 组件，配置 rowData 和 columnDefs 属性，为表格提供数据
    <template>
  <ag-grid-vue
    :rowData="rowData"
    :columnDefs="colDefs"
    style="height: 500px"
    class="ag-theme-quartz"
  >
  </ag-grid-vue>
</template>

2. JavaScript环境

  1. 提供容器
    • 引入AG-Grid库文件，并创建一个空白div
    <html lang="en">
  <head>
    <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
  </head>
  <body>
    <div id="myGrid"></div>
  </body>
</html>
  2. 创建实例
    • 创建实例，并将空白div传入
    const gridOptions = {};

const myGridElement = document.querySelector('#myGrid');
// 创建实例，传入容器 和 Grid 配置对象
agGrid.createGrid(myGridElement, gridOptions);
  3. 定义行和列
    // Grid 配置对象
const gridOptions = {
  // 行数据：要显示的数据
  rowData: [
    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
    { make: "Ford", model: "F-Series", price: 33850, electric: false },
    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
  ],
  // 列定义：定义要显示的列
  columnDefs: [
    { field: "make" },
    { field: "model" },
    { field: "price" },
    { field: "electric" }
  ]
};
  4. 添加样式
    • 通过class设置表格主题：ag-theme-quartz
    <div id="myGrid" class="ag-theme-quartz" style="height: 500px"></div>

3. 其他方式

  1. React：https://ag-grid.com/react-data-grid/getting-started/
  2. Angular：https://ag-grid.com/angular-data-grid/getting-started/

四、最后

AG-Grid真的是一个功能强大的数据表格，借用官网上的一句话作为结束：

The Best JavaScript Grid in the World

# javascript # 前端 # ecmascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue