最近因为项目需求，element的表格组件已经满足不了项目了，于是，新项目里开始全面使用ag-Grid，一个号称JS里最好的表格插件。

嘛，第一次用，一头雾水，仿佛回到了学echarts的时候

反正先安装，对了，官网上会告诉你，有免费版和收费版，先无脑上免费版（对了，我是vue项目，所以安装的是vue版）

npm install --save ag-grid

而在组件中使用也很简单（当然是说的最简单的那种表格）

<template>
    <div>
        <ag-grid-vue
        :column-defs="columnDefs"
        :row-data="rowData"
        />
    </div>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue'
export default {
    components: {
        AgGridVue
    },
    data() {
        return {
            columnDefs: [
              {headerName: "Make", field: "make"},
              {headerName: "Model", field: "model"},
              {headerName: "Price", field: "price"}
            ];// 这是表头列表 headerName是用户看到的表头，field是对接rowData的字段
            rowData: [
              {make: "Toyota", model: "Celica", price: 35000},
              {make: "Ford", model: "Mondeo", price: 32000},
              {make: "Porsche", model: "Boxter", price: 72000}
            ];// 这是数据列表
        }
    }
}
</script>
<!--总结起来就是，导入，注册组件，在data里编写columnDefs和rowData数据，然后在template里使用-->

这样就学会ag-Grid了。。。。吧？

不，这根本无法满足实际需求，甚至还不如element，那么为什么ag-Grid号称Best JavaScript Grid呢？ 因为他的配置可以无比丰富。。。。（看到文档我就累了）