ag-grid表格如何使用？

1、自定义标题

// tableHeaderCustom.vue"
<template>
  <div class="clearfix" style="font-weight: 400">
    <span class="pull-left">{{ params.displayName }}</span>
    <Poptip trigger="hover" :transfer="true" :content="params.toolTipText">
      <i
        class="iconfont iconios-information-circle-outline color-primary mg-lf-3 pull-left font-size-14 cursor-pointer"></i>
    </Poptip>
    <!-- 排序按钮 -->
    <span class="height-32 flex  align-items-center  inline-block mg-lf-3 pull-left" v-if="params.sortFun"
          @click="sortFun()">
<!--      <span class="cursor-pointer ag-icon ag-icon-none "></span>-->
      <Icon class="cursor-pointer color-c5c8ce " :class="{'color-2d8cf0':params.sortType === 'asc'}"

            type="ios-arrow-round-down"/>
      <Icon class="cursor-pointer color-c5c8ce " :class="{'color-2d8cf0':params.sortType === 'desc'}"
            type="ios-arrow-round-up"
            style="transform: translateX(-9px);"/>
    </span>
  </div>
</template>

<script>

export default {
  name: "",

  data() {
    return {};
  },
  mounted() {
  },
  methods: {
    sortFun() {
      console.log(111, this.params)
      if (typeof this.params.sortFun === 'function') {
        if (this.params.sortType === '') {
          this.params.setSortTypeFun('desc', this.params.column.colId)
        } else if (this.params.sortType === 'desc') {
          this.params.setSortTypeFun('asc', this.params.column.colId)
        } else if (this.params.sortType === 'asc') {
          this.params.setSortTypeFun('', this.params.column.colId)
        }
        this.params.sortFun(this.params.sortType)
      }

    }
  }
};
</script>

<style scoped lang="less">

.color-c5c8ce {
  color: #c5c8ce;
}

.color-2d8cf0 {
  color: #2d8cf0;
}
</style>

// 项目引用的js文件
import tableHeaderCustom from "allpages/inventoryCenter/channelStockControl/tableHeaderCustom.vue";

{
	headerName: '差异数(>=)',
	field: 'qtyDifferences',
	tdAlign: 'left',
	isagfilter: true,
	headerComponentFramework: Vue.extend(tableHeaderCustom),
	headerComponentParams: {
		toolTipText: '店铺库存 - 平台库存', // 参数
	},
 }

2、 记住用户拖动列的顺序，并重新设置列排序顺序

 /**
     * 根据接口返回的顺顺序，重组列的顺序
     * @param val
     * @param th
     * @returns {[]}
     */
    setColumn(val, th) {
      let arr = val.split(',')
      let thArr = []
      arr.forEach((item) => {
        let head = th.find((i) => {
          return i.field === item
        })
        if (head) {
          thArr.push(head)
        }
      })
      return thArr
    },
    /**
     * 获取表格列的顺序
     */
    getUserConfigFun() {
      const formData = new FormData();
      formData.append('type', 'type'); 
      formData.append('id', '41460534');
      this.service.common.getUserConfig(formData).then((res) => { // 接口返回的顺序如：'index,age,name'
        if (res.data.code === 0) {
          this.agTableConfig.columnDefs = this.setColumn(res.data.data.colPosition, 				this.agTableConfig.columnDefs)
        }
      });
    },
    /**
     * 设置表格列的顺序
     */
    columnmovedFun(v) {
      const colposition = []
      const allGridColumnsArr = this.agTableConfig.columnApi.getAllGridColumns() || [] // 获取表格列的顺序
      allGridColumnsArr.forEach((item) => {
        colposition.push(item.colId)
      })
      console.log(999, colposition)
      this.debounceFun(() => {
        const formData = new FormData();
        formData.append('tableid', '41460534'); // V_SG_CHANNEL_PRO_INFO
        formData.append('colposition', colposition);
        this.service.common.setColPosition(formData).then((res) => {}); // 用接口存储起来
      })
    },

3、设置默认选中的表格行

/**
  * 设置默认选中的表格行
*/
    setCheckedRow() {
      const selectedIndex = []
      this.multipleSelection.forEach((item) => {
        selectedIndex.push(item.id)
      })
      this.agTableConfig.gridApi.forEachNode((node) => {
        if (selectedIndex.includes(node.data.id)) {
          this.agTableConfig.gridApi.selectNode(node, true);
        }
      });
    },

4、表格准备完毕

  /**
     * 表格准备完毕
     * @param params
     */
    onGridReady(params) {
      this.agTableConfig.gridApi = params.api;
      this.agTableConfig.columnApi = params.columnApi;
      this.getUserConfigFun()
      if (this.data1.length) {
        this.agTableConfig.gridApi.sizeColumnsToFit();
      }
    },

基础配置

  agTableConfig: {
        gridApi: {},
        columnApi: {},
        columnDefs: [
          {
            headerName: "序号",
            width: 90,
            field: "index",
            checkboxSelection: true,
            pinned: 'left',
            headerClass: '',
            thAlign: 'left',
            tdAlign: 'left',
            cellStyle: {color: 'rgb(15, 142, 233)'},
          },
          {
            headerName: '差异数(>=)',
            field: 'qtyDifferences',
            tdAlign: 'left',
            isagfilter: true,
            headerComponentFramework: Vue.extend(tableHeaderCustom),
            headerComponentParams: {
              toolTipText: '店铺库存 - 平台库存',            
            },
          },
        ], // 表头
        rowData: [],
        renderArr: {}, // 表格内处理
        renderParams: (cellData) => {       //render表格渲染
          if (cellData.field === 'index') { // 序号
            return {
              renderContainer: 'CellRenderByFunction',
              renderComponent: (h, params) => {
                return h('span', {}, (this.page1.current - 1) * this.page1.pageSize + params.rowIndex + 1)
              }
            }
          }
      },