【table】Ag-Grid高性能表格库实践

首先展示一下表格插件的强大功能

虚拟滚动+可过滤+可排序+可编辑+可拖拽+跨平台+流畅...

由于图片上传限制，具体更多功能可通过：www.ag-grid.com/example/ 去体验

文档地址：www.ag-grid.com/

中文文档地址：www.itxst.com/ag-grid/tut...

且谈缺点：配置项太多，较复杂，上手成本高，阅读一部分文档发现功能配置部分重合

下面记录下使用ag-grid插件的常见使用功能

列常用配置

www.ag-grid.com/vue-data-gr...

内置编辑器【cellEditor】

www.ag-grid.com/vue-data-gr...

其中包括：下拉选项编辑器、日期编辑器、文本编辑器、自定义等等，如：

kotlin 复制代码

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { 
        field: 'name', 
        editable: true, 
        cellEditor: 'agSelectCellEditor', 
        cellEditorParams: { values: ['有效线索', '无效线索', '暂未明确'], 
    },
    { 
        field: 'name', 
        editable: true, 
        // uses a custom editor, referenced directly
        cellEditor: CustomEditorComp
    },
];

核心：其中使用自定义编辑器的时候会默认给组件传入props：params

xml 复制代码

<script lang="ts">
   import {defineComponent} from "vue";

   export default defineComponent({
       name: "MyComponent",
       props: ['params'],  // required for TypeScript ...
   })
</script>

2.实操配置操作栏组件

思路：把父组件的context上下文传给子组件，子组件触发父组件事件，参照官网的例子

Example: Rendering using more complex Components

思考：【官网的例子，没有完全解耦，需要在子组件中硬编码触发父组件的方法函数，这是因为没有办法像普通组件一样抛出一个事件，使用ag-grid-vue接收(因为严格意义这个才是父组件，定义单元格是其下面的子组件)】，希望有好办法的大佬指导！！！

xml 复制代码

// 操作栏组件：【子组件】
<script setup lang="ts">
import { ref, defineProps } from "vue"

const emit = defineEmits(['onClickDetailOpt']);

const props = defineProps({
  params: {
    type: Object,
  },
})

const onClick = () => {
  const rowId = props.params.value
  const componentParent = (props.params && props.params.context && props.params.context.componentParent) || ''
  if (!rowId || !componentParent) return
  componentParent && componentParent.optDetailClick(rowId)
};

</script>

<template>
  <span class="ag-grid-option-cell">
    <span class="ag-grid-option-cell-value" @click="onClick">查看编辑</span>
  </span>
</template>

<style>
.ag-grid-option-cell{

}
.ag-grid-option-cell-value{
  cursor: pointer;
  color: #ce1d22;
}
.ag-grid-option-cell-value:hover{
  font-weight: 500;
}
</style>

xml 复制代码

// 父组件：
<template>
  <ag-grid-vue
      :rowData="rowData"
      :columnDefs="colDefs"
      :context="context" // 传递上下文
      @grid-ready="onGridReady"
      style="height: 100%"
      :defaultColDef="defaultColDef"
      class="ag-theme-quartz"
    >
    </ag-grid-vue>
</template>

<script>
import optionCell from "@/components/ag-grid/optionCell.vue"

export default {
  data () {
    return {
      context: null,
      rowData: [],
      defaultColDef: {
          flex: 1,
          minWidth: 80, 
      },
      colDefs: [
         ...,
         { 
            headerName: '操作', 
            field: "id",
            cellRenderer: optionCell,
            pinned: "right",
          },
      ]
    }
  },
  mounted(){
    this.context = {
      componentParent: this
    }
  },
  methods: {
    onGridReady(){
    },
    optDetailClick(rowId){
      this.$refs.LineInfoDetailDraw.show(rowId)
    }
  }
}
</script>

宽度配置

www.ag-grid.com/vue-data-gr...

（1）采用width、min-width配置

const 复制代码

      { 
        headerName: '序号', 
        field: "id", 
        width: 50,
        pinned: "left",
      },
    ]

(2) 自适应表格大小配置：[autoSizeStrategy]

ini 复制代码

<ag-grid-vue 
    :autoSizeStrategy="autoSizeStrategy" 
    /* other grid options ... *
/> 
</ag-grid-vue> 

this.autoSizeStrategy = { 
    type: 'fitCellContents' 
 };

位置配置

pinned固定列效果

const 复制代码

      { 
        headerName: '序号', 
        field: "id", 
        width: 50,
        pinned: "left",
      },
    ]

编辑配置

www.ag-grid.com/vue-data-gr...

包括可以配置双击编辑、还是单击编辑等

页脚配置

实操过程后来使用了普通ui组件的pagnition组件【因为看自定义的话，需要自己重新写组件感觉更麻烦】

样式配置

筛选配置

排序配置

大体过了一遍问题，感觉性能、跨平台的能力肯定是能打的，但是感觉配置项还是太多了