ag-grid介绍

ag-grid是一款功能和性能强大外观漂亮的表格插件,ag-grid几乎能满足你对数据表格所有需求。固定列、拖动列大小和位置、多表头、自定义排序等等各种常用又必不可少功能.目前项目使用的是企业版. 企业版与社区版的功能区别请参看功能比较 Vue Data Grid: Community and Enterprise (ag-grid.com)

ag-grid vue中基本用法

<ag-grid-vue style="width: 100%; height: 800px;border:1px solid #ccc" 
            class="table ag-theme-material"
            :rowData="tableData" >
	     <ag-grid-column
              field="姓名" filter="agTextColumnFilter">
          </ag-grid-column>
          <ag-grid-column
              field="年龄"
              sortable 可以以年龄进行排序
              >
          </ag-grid-column>
          <ag-grid-column
              field="性别"
              >
          </ag-grid-column>
 </ag-grid-vue>

import { AgGridVue } from 'ag-grid-vue'
components: {
    AgGridVue,
  },
      data(){
              tableData: [
        {
          姓名:'张三',
          年龄: 20,
          性别:'男'
        },{
          姓名:'七七',
          年龄: 12,
          性别:'女'
        },{
          姓名:'胡桃',
          年龄: 22,
          性别:'女'
        },
      ],
      }

生成最基本的表格:

在这里插入图片描述

ag-grid-vue 属性
属性名称说明类型默认值
rowData表格需要的数据Array
enableRangeSelection是否范围选择Booleanfalse
sideBar右侧sideBar是否显示Booleanfasle
context提供上下文对象，用于通过您的应用程序将其他信息传递给回调。建议传this
rowSelection行选择的类型 单选,多选[‘single’,‘multiple’]Stringsingle
suppressRowClickSelection点击行是否选中行 false为必须点击复选框才选中(开启列复选框见 ag-grid-column 属性表)Booleantrue
localeText本地化配置,(默认语言是英语,需要设置对应的关键字中文翻译实现汉化)Object
defaultColDef列默认配置(见下表)Object
frameworkComponents表格使用的各种组件Object
icons自定义表格上的图标可以是html标签如:{filter: ‘’} 这是将过滤器图标替换成了自定义的图标 具体参考: Vue Data Grid: Custom Icons (ag-grid.com)string
getRowNodeId给定表格每一行唯一的id(标识),如不设置则表格将会从0开始自动生成 参数为回调函数 (data) => data.IDfunction
defaultColDef 属性
属性名称说明类型默认值
resizable是否可以调整列大小(拖动列边框改变列大小)Booleantrue
filter开启筛选(会被ag-grid-column filter 属性覆盖)Booleanfalse
headerCheckboxSelection头部全选框(开启方式见示例)Function
ag-grid-vue 事件
参数说明回调参数
gridReady表格准备完毕事件params.api(表格api调用) params.columnApi(列api调用)
rowDoubleClicked表格某一行双击事件{rowIndex,data} 行号, 该行的数据
rowClicked表格某一行单击事件
cellDoubleClicked单元格双击事件
gridSizeChanged表格大小改变触发事件
cellClicked单元格单击事件

更多事件查看: Vue Data Grid: Grid Events (ag-grid.com)

ag-grid 表格常用api(表格api调用需要在表格onGridReady事件中获取gridApi)
    //ag-grid创建完成后执行的事件
    onGridReady(params) {
      // console.log(params)
      
      this.gridApi = params.api // 获取gridApi 保存在data中通过gridApi调用ag-grid的方法
      this.columnApi = params.columnApi // 这个是列的api,其中包含列的操作方法,这里不列举了
      // 通过gridApi调用ag-grid的自动调整表格到合适的大小的方法
      this.gridApi.sizeColumnsToFit()
    },
方法名说明参数
selectAll全选表格所有行
deselectAll全不选
sizeColumnsToFit自动调整表格到合适的大小的方法
getSelectedRows获取当前选择的所有行
getRowNode获取给定的ID的行对象 如果未设置表格getRowNodeId属性则返回表格生成的id,获取到的行对象可以继续调用setSelected 进行行选择例:this.gridApi.getRowNode(0).setSelected(true,true)(行id)
ensureIndexVisible滚动选定的行(使选定的行在可视范围内)(行id,top|bottom|meddle)

更多表格api 参考Vue Data Grid: Grid API (ag-grid.com)

ag-grid-column 属性
属性名称说明可选值类型默认值
headerName显示的标题string
field对应列内容的字段名string
sortable该列启用排序
pinned固定该列left|rightstring
valueFormatter值为一个回调函数,功能与vue的filter类似,可以对当前的数据加工后显示function(data){
return data+1
}		Function
width对应列的宽度number
filter过滤器的类型agNumberColumnFilter(数字过滤器) agTextColumnFilter(文字过滤器) agDateColumnFilter(日期过滤器) agMultiColumnFilter(启动多个过滤器) agSetColumnFilter(在当前列找出可能的值选择过滤 企业版拥有)String
suppressMenu不显示头部菜单true显示,false不显示Booleanfalse
cellRendererFramework当前列使用组件(表格中放入操作按钮或者其他自定义内容)vue组件
menuTabs显示菜单 需要将suppressMenu设为false‘filterMenuTab’ |‘generalMenuTab’ |‘columnsMenuTab’ 后两个企业版拥有Array
filterParams过滤器属性 可以选择进行自定义过滤器 过滤器下方的按钮显示与隐藏 参考https://www.ag-grid.com/vue-data-grid/filter-provided/例:{comparator:comparator, buttons: [‘reset’,‘cancel’,‘apply’]}第一个参数是过滤器自定义的规则,为回调函数,第二个参数为显示过滤器下方的重置,取消,确定按钮 删除就不显示Object
headerComponentParams在使用头部组件时可以使用,相当于给头部组件的参数Object
列组件使用示例 部分代码
// tableBtn.vue
<template>
    <div>
        <el-button size="mini" @click="buttonClicked" type="primary">修改</el-button>
        <el-button size="mini" type="danger">删除</el-button>
    </div>
</template>

<script>
export default {
  data() {
    return {
      cellValue: null
    }
  },
  beforeMount() {
    //this.params包含单元格和行信息，在创建时可供此组件使用
    this.cellValue = this.getValueToDisplay(this.params)
  },
  methods: {
    buttonClicked() {
        // context为ag-grid-vue属性这里提供的是this表格所在vue组件的实例所以可以调用到父组件中的methodFromParent 函数
        this.params.context.methodFromParent()
    },

    getValueToDisplay(params) {
      return params.valueFormatted ? params.valueFormatted : params.data
    }
  }
}
</script>

// index.vue
 <ag-grid-vue 
            style="width: 100%; height: 800px;border:1px solid #ccc" 
            class="table ag-theme-material"
            :rowData="tableData" 
            :context="this" // 将当前实例传递给组件
            :localeText="agGridCHSLocalText"
        >
          <ag-grid-column
              field="操作" 
              :width="150"
              cellRendererFramework="TableBtn">
          </ag-grid-column>
        </ag-grid-vue>
<script>
//引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue'
import TableBtn from './TableBtn'
export default {
  //注册TableBtn组件
  components: {
    AgGridVue,
    TableBtn
  },
</script>

这里仅仅只是展示了一些常用的属性事件等用法,更多的用法以及功能,请仔细认真阅读官方文档!!!

放两张成品图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FduCAJFU-1632454549700)(./images/Snipaste_2021-09-24_10-58-24.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WqmzRYqr-1632454549702)(./images/Snipaste_2021-09-24_10-59-13.png)]

第二张为自定义过滤器

其他的排序图表生成导出等功能就不一一展示了.

这里仅仅只是展示了一些常用的属性事件等用法,更多的用法以及功能,请仔细认真阅读官方文档!!!

放两张成品图

在这里插入图片描述

在这里插入图片描述

第二张为自定义过滤器

其他的排序图表生成导出等功能就不一一展示了.

# vue.js # javascript # html
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