ag-grid配置

子组件代码

<template>
  <section style="width: 100%;height: 100%">
    <div>
      <!-- <input type="text" placeholder="请输入要搜索的内容" v-model="searchText"> -->
    </div>
    <ag-grid-vue
      :bodyScroll="bodyScroll"
      :cellMouseOver="cellMouseOver"
      :rowDataChanged="rowDataChanged"
      :editType="gridParameter.editType || 'fullRow'"
      :suppressClickEdit="gridParameter.suppressClickEdit"
      :suppressRowClickSelection="gridParameter.suppressRowClickSelection"
      :suppressCellSelection="gridParameter.suppressCellSelection"
      :class="gridParameter.themeName || 'ag-theme-balham'"
      :headerHeight="gridParameter.headerHeight"
      :floatingFilter="gridParameter.floatingFilter"
      :style="gridParameter.style"
      :columnDefs="gridParameter.columnDefs"
      :rowData="gridParameter.rowData"
      :rowHeight="gridParameter.rowHeight"
      :rowSelection="gridParameter.rowSelection"
      :defaultColDef="gridParameter.defaultColDef"
      :gridOptions="gridOptions"
      :cellClicked="onCellClicked"
      :cellValueChanged="cellValueChanged"
      :cellEditingStarted="cellEditingStarted"
      :cellEditingStopped="cellEditingStopped"
      :rowDoubleClicked="rowDoubleClicked"
      :rowClicked="rowClicked"
      :onGridReady="onGridReady"
      :columnMoved="columnMoved"
      :rowSelected="rowSelected"
      :rowValueChanged="rowValueChanged"
      :components="gridParameter.components"
      @editClick="editClick"
      :isRowSelectable="gridParameter.isRowSelectable"
      :frameworkComponents="frameworkComponents"
    ></ag-grid-vue>
    <pg v-if="showPaged"></pg>
    <!-- <button @click="edit">edit</button>
    <button @click="stopEdit">top edit</button>-->
  </section>
</template>

<script>
import { AgGridVue } from "ag-grid-vue";
import "ag-grid-enterprise";
import { mapGetters } from "vuex";
import pg from "./Pagina/index";
import { getCookies } from "@/utils/auth";
// import demo from "./demo/index";
export default {
  props: [
    "gridParameter",
    "searchText",
    "getRowNodes",
    "showPaged",
    "roleGrid",
    "peopleGrid",
    "userRowClick",
    "frameworkComponents",
    "cellMouseOver1",
  ],
  name: "App",
  components: {
    AgGridVue,
    pg,
    // GridEditButtons: demo,
  },
  computed: {
    ...mapGetters(["columnSaveState", "now_page"]),
  },
  data() {
    return {
      gridStyleKey: "",
      gridApi: "",
      columnApi: "",
      selectdNodes: [],
      gridOptions: {
        // defaultColDef: {
        //   // allow every column to be aggregated
        //   enableValue: true,
        //   // allow every column to be grouped
        //   enableRowGroup: true,
        //   // allow every column to be pivoted
        //   enablePivot: true,
        //   editable: true // 开启网格编辑功能
        // },
        // editable: false, // 开启网格编辑功能
        // rowSelection: 'multiple',
        // treeData: true, // 树数据结构
        // editType: 'fullRow', // 开启整行编辑
        enableSorting: true, // 开启排序功能
        enableFilter: true, // 开启过滤功能
        enableColResize: true, // 开启调整列宽
        showToolPanel: false, // 展开功能面板
        contractColumnSelection: true, // 默认不展开tree
        toolPanelSuppressRowGroups: true,
        toolPanelSuppressSideButtons: true, // 禁止选项面板功能
        // toolPanelSuppressValues: false,
        // toolPanelSuppressPivots: false,
        toolPanelSuppressPivotMode: true,
        // suppressClickEdit: true, // 禁用双击网格编辑
        // toolPanelSuppressColumnFilter: true,
        // toolPanelSuppressColumnSelectAll: true,
        // toolPanelSuppressColumnExpandAll: true,
        // pagination: true, // 开启分页器
        // rowGroupPanelShow: 'always', // 表格顶部栏
        // enableRowGroup: true,
        // enablePivot: true,
        // enableStatusBar: true, // 开启状态栏
        // paginationPageSize: 500, // 分页器每页显示的条数
        // enableRangeSelection: true,// 开启拖动选择网格
        // groupHeaders: true, // 使用组标题
        rowDragManaged: true, // 设置行拖动    需要在表格其中一个列    设置rowDrag:true
        animateRows: true, // 拖动动画效果
        // rowMultiSelectWithClick: true,
        stopEditingWhenGridLosesFocus: true, // 在网格失去焦点时停止单元格编辑
        // singleClickEdit: true,
        localeText: {
          // 国际化
          // for filter panel
          page: "当前页",
          more: "更多",
          to: "至",
          of: "总数",
          next: "下一页",
          last: "上一页",
          first: "首页",
          previous: "上一页",
          loadingOoo: "加载中...",
          // for set filter
          selectAll: "全选",
          searchOoo: "请输入关键字...",
          blanks: "空白",
          // for number filter and text filter
          filterOoo: "过滤...",
          applyFilter: "daApplyFilter...",
          // for number filter
          equals: "相等",
          notEqual: "不相等",
          lessThan: "小于",
          greaterThan: "大于",
          lessThanOrEqual: "小于等于",
          greaterThanOrEqual: "大于等于",
          inRange: "范围",
          contains: "包含",
          notContains: "不包含",
          startsWith: "开始于",
          endsWith: "结束于",
          // the header of the default group column
          group: "组",
          // tool panel
          columns: "列选项",
          rowGroupColumns: "laPivot Cols",
          rowGroupColumnsEmptyMessage: "拖拽组到这里",
          valueColumns: "laValue Cols",
          pivotMode: "枢轴模式",
          groups: "laGroups",
          values: "laValues",
          pivots: "laPivots",
          valueColumnsEmptyMessage: "la drag cols to aggregate",
          pivotColumnsEmptyMessage: "la drag here to pivot",
          // other
          noRowsToShow: "无数据",
          // enterprise menu
          pinColumn: "固定列",
          valueAggregation: "laValue Agg",
          autosizeThiscolumn: "自动调整当前网格宽度",
          autosizeAllColumns: "自动调整当前页所有网格宽度",
          groupBy: "排序",
          ungroupBy: "不排序",
          resetColumns: "恢复网格样式",
          expandAll: "展开全部",
          collapseAll: "关闭",
          toolPanel: "显示/隐藏控制表盘",
          export: "导出到...",
          csvExport: "导出CSV",
          excelExport: "导出Excel",
          // enterprise menu pinning
          pinLeft: "<<锁定至表格左侧",
          pinRight: ">>锁定至表格右侧",
          noPin: "<>取消锁定",
          // enterprise menu aggregation and status panel
          sum: "总数",
          min: "最小值",
          max: "最大值",
          none: "无",
          count: "总",
          average: "平均",
          // standard menu
          copy: "复制",
          copyWithHeaders: "复制内容及标题",
          ctrlC: "ctrl + C",
          paste: "粘贴",
          ctrlV: "ctrl + V",
        },
      },
    };
  },
  watch: {
    searchText(val) {
      this.onFilterTextBoxChanged();
    },
  },
  mounted() {
    const corpCode = getCookies("corpCode");
    const loginCode = getCookies("loginCode");
    const now_page = this.now_page;

    this.gridStyleKey = `${corpCode}_${loginCode}_${now_page}`;
  },
  methods: {
    onGridReady(event) {
      // 表格加载完成事件
      this.gridApi = event.api;
      this.columnApi = event.columnApi;
      // event.api.sizeColumnsToFit()
      // event.columnApi.autoSizeColumns()
      if (!event.api.getModel()) {
        // 所有列展示在当前表格页面
        const allColumnIds = event.columnApi.getAllColumns();
        // event.api.sizeColumnsToFit()
        this.$emit("onGridReady", event);
        // this.gridApi.sizeColumnsToFit();
        event.columnApi.autoSizeColumns(allColumnIds);
      }
    },
    rowDataChanged(event) {
      // event.api.sizeColumnsToFit()// 所有列展示在当前表格页面
      // const allColumnIds = event.columnApi.getAllColumns()
      // var b =
      // .forEach(function(column) {
      //   allColumnIds.push(column.colId)
      // })
      // event.columnApi.autoSizeColumns(allColumnIds)// 自动调整所有列宽
    },
    onCellClicked(event) {
      // 每个格子的点击事件
      this.$store.dispatch("onCellClicked", event.value);
      this.$store.commit("GET_CELL_EVENT", event);
      this.$emit("cellClick", event);
      this.$emit("onCellClicked", event);
      if (sessionStorage.getItem("orderStatus") === "ddfcwc") {
        this.gridOptions.suppressClickEdit = true;
      } else {
        this.gridOptions.suppressClickEdit = false;
      }
    },
    cellValueChanged(event) {
      // 网格内容更改事件
      // this.$store.commit('GET_CELL_EVENT', event)
      this.$emit("changedValue", event);
      this.$emit("cellValueChanged", event);
    },
    rowDoubleClicked(event) {
      this.$emit("rowDoubleClicked", event);
      // 双击行  事件
      //
      this.$store.commit("SAVE_GRID_DIRECTING", this.$attrs.id);
      this.$store.commit("GET_DOUBLE_CLICKED_EVENT", event);
    },
    rowClicked(event) {
      // 单击行  事件
      this.$emit("rowClicked", event);
      this.$store.commit("SAVE_GRID_DIRECTING", this.$attrs.id);
      if (this.roleGrid) {
        this.$store.commit("GRID_CLICK_ROW", event.data);
        this.$emit("gridClick");
      } else if (this.peopleGrid) {
        return;
      } else {
        this.$store.commit("GRID_CLICK_ROW", event.data);
        this.$emit("gridClick");
      }
    },
    columnMoved(event) {
      // 列移动事件
      this.$emit("columnMoved", event);
    },
    saveState(value) {
      if (value) {
        // 保存表格样式
        const columnSendState = {
          colState: this.gridOptions.columnApi.getColumnState(),
          groupState: this.gridOptions.columnApi.getColumnGroupState(),
          sortState: this.gridOptions.api.getSortModel(),
          filterState: this.gridOptions.api.getFilterModel(),
        };
        // this.$store.dispatch('saveGridColumnState', columnSendState)
        localStorage.setItem(
          `${this.gridStyleKey}_${value}`,
          JSON.stringify(columnSendState)
        );
        const saveGridStyle = {
          url: "/tableStyle/save",
          method: "post",
          params: {
            key: `${this.gridStyleKey}_${value}`,
            value: JSON.stringify(columnSendState),
          },
        };
        this.$store.dispatch("get_to_do_tasks", saveGridStyle).then((res) => {
          // 待办项目
          //
          if (res.success) {
            this.$message({
              type: "success",
              message: "表格样式保存成功",
            });
          }
        });
      }
    },
    reset(value) {
      if (!value) {
        return false;
      }
      // 恢复自定义表格样式
      var columnSaveState = JSON.parse(
        localStorage.getItem(`${this.gridStyleKey}_${value}`)
      );
      if (columnSaveState) {
        this.gridOptions.columnApi.setColumnState(columnSaveState.colState);
        this.gridOptions.columnApi.setColumnGroupState(
          columnSaveState.groupState
        );
        this.gridOptions.api.setSortModel(columnSaveState.sortState);
        this.gridOptions.api.setFilterModel(columnSaveState.filterState);
      } else {
        const getGridStyle = {
          url: "/tableStyle/get",
          method: "post",
          params: {
            key: `${this.gridStyleKey}_${value}`,
          },
        };
        this.$store.dispatch("get_to_do_tasks", getGridStyle).then((res) => {
          // 待办项目
          if (res.data) {
            columnSaveState = JSON.parse(res.data.value);
            if (columnSaveState) {
              this.gridOptions.columnApi.setColumnState(
                columnSaveState.colState
              );
              this.gridOptions.columnApi.setColumnGroupState(
                columnSaveState.groupState
              );
              this.gridOptions.api.setSortModel(columnSaveState.sortState);
              this.gridOptions.api.setFilterModel(columnSaveState.filterState);
              // this.saveState(value)
            }
          }
        });
      }
    },
    restore() {
      // 恢复表格默认样式
      this.gridOptions.columnApi.resetColumnState();
      this.gridOptions.columnApi.resetColumnGroupState();
      this.gridOptions.api.setSortModel(null);
      this.gridOptions.api.setFilterModel(null);
    },
    onFilterTextBoxChanged() {
      //
      this.gridOptions.api.setQuickFilter(this.searchText);
    },
    edit(index, key) {
      // this.gridOptions.api.setRowData()
      this.gridOptions.api.setFocusedCell(index, key); // 定位焦点
      this.gridOptions.api.startEditingCell({
        // 开始编辑加点行
        rowIndex: index,
        colKey: key,
      });
    },
    stopEdit(event) {
      this.gridOptions.api.stopEditing();
    },
    cellEditingStarted(event) {
      // cell开始编辑
      this.$emit("cellEditingStarted", event);
    },
    cellEditingStopped(event) {
      // cell开始编辑
      this.$emit("cellEditingStopped", event);
    },
    rowValueChanged(event) {
      // 行内的值发生变化
      this.$store.commit("ROW_VALUE_CHANGED_DATA", event.data);
      this.$emit("childRowchanged", event);
      this.$emit("rowValueChanged", event);
    },
    isFirstColumn(params) {
      // var displayedColumns = this.gridOptions.columnApi.getAllDisplayedColumns()
      // var thisIsFirstColumn = displayedColumns[0] === this.gridOptions.column
      // return thisIsFirstColumn
    },
    addNewRow() {},
    rowSelected(params) {
      // row选择事件回调
      const selectdNodes = params.api.getSelectedNodes();
      const id = this.$el.id;
      selectdNodes.gridId = id;
      this.selectdNodes = selectdNodes;
      // console.log("selectdNodes");
      // console.log(selectdNodes);
      this.$store.commit("GRID_SELECT_ROW", selectdNodes);
      this.$emit("rowSelected", params);
    },
    bodyScroll(event) {
      this.$emit("bodyScroll", event);
      // if (event.direction === 'horizontal' && event.left % 300 === 0) {
      //   event.columnApi.autoSizeColumns()
      //   var allColumnIds = []
      //   event.columnApi.getAllColumns().forEach(function(column) {
      //     allColumnIds.push(column.colId)
      //   })
      //   event.columnApi.autoSizeColumns(allColumnIds)// 自动调整所有列宽
      // }
    },
    cellMouseOver(event) {
      this.$emit("cellMouseOver1", event);
    },
    editClick(event) {
      // console.log(123);
      // console.log(event);
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>

　　父组件调用

          <ag-grid :gridParameter="gridParameter" :searchText="searchInput"></ag-grid>


import agGrid from "@/components/AgGrid/index.vue";
components: {
    agGrid,
  },

      gridParameter: {
        style: {
          //表格样式
          height: "calc(100% - 165px)",
          width: "100%",
        },
        columnDefs: [
          //每列
          {
            headerName: "数据来源",
            field: "sourceFrom",
            width: 120,
          },
          {
            headerName: "公司名称",
            field: "companyname",
            width: 150,
          },
          {
            headerName: "网点名",
            field: "netsite",
            width: 100,
          },
          {
            headerName: "车辆线路起点",
            field: "bsite",
            width: 120,
          },
          {
            headerName: "车辆线路终点",
            field: "esite",
            width: 120,
          },
          {
            headerName: "装车时间",
            field: "loadingTime",
            width: 100,
          },
          {
            headerName: "实际发车时间",
            field: "sendtime",
            width: 120,
          },
          {
            headerName: "车牌号",
            field: "carnumber",
            width: 100,
          },
          {
            headerName: "挂车牌号",
            field: "trailernumer",
            width: 100,
          },
          {
            headerName: "司机手机号",
            field: "drivertel",
            width: 100,
          },
          {
            headerName: "装车件数",
            field: "orderCount",
            width: 100,
          },
          {
            headerName: "总件数",
            field: "qty",
            width: 100,
          },
          {
            headerName: "重量",
            field: "weight",
            width: 100,
          },
          {
            headerName: "体积",
            field: "vol",
            width: 100,
          },
          {
            headerName: "运输费合计",
            field: "transfee",
            width: 100,
          },
          {
            headerName: "批次状态",
            field: "batchState",
            width: 100,
          },
          {
            headerName: "托运单号",
            field: "billNo",
            width: 100,
          },
          {
            headerName: "发车批次",
            field: "batchNo",
            width: 100,
          },
          {
            headerName: "网点地址（省）",
            field: "netProvince",
            width: 150,
          },
          {
            headerName: "网点地址（市）",
            field: "netCity",
            width: 150,
          },
          {
            headerName: "网点地址（区）",
            field: "netDistrict",
            width: 150,
          },
          {
            headerName: "到达时间",
            field: "arrivedTime",
            width: 100,
          },
          {
            headerName: "实际运费",
            field: "actualFreight",
            width: 100,
          },
          {
            headerName: "单车毛利",
            field: "profit",
            width: 100,
          },
          {
            headerName: "现付运输费",
            field: "handTransitFee",
            width: 100,
          },
          {
            headerName: "现付油卡费",
            field: "handCardFee",
            width: 100,
          },
          {
            headerName: "回车运输费",
            field: "retTransitFee",
            width: 100,
          },
          {
            headerName: "整车信息费",
            field: "vehicleInfoFee",
            width: 100,
          },
          {
            headerName: "到付油卡费",
            field: "payCardFee",
            width: 100,
          },
          {
            headerName: "车辆核载",
            field: "vehicleBorne",
            width: 100,
          },
          {
            headerName: "原始单号",
            field: "originalDocumentNumber",
            width: 100,
          },
          {
            headerName: "统一社会信用代码",
            field: "socialCreditIdentifier",
            width: 150,
          },
          {
            headerName: "许可证编号",
            field: "permitNumber",
            width: 100,
          },
          {
            headerName: "业务类型代码",
            field: "businesstypeCode",
            width: 120,
          },
          {
            headerName: "发运实际日期",
            field: "goodsReceiptdatetime",
            width: 120,
          },
          {
            headerName: "发货人",
            field: "consignor",
            width: 100,
          },
          {
            headerName: "发货人个人证件号",
            field: "rpersonalIdentity",
            width: 150,
          },
          {
            headerName: "发货方-国家行政区划代码",
            field: "rcountrySubdivisioncode",
            width: 180,
          },
          {
            headerName: "收货人",
            field: "consignee",
            width: 100,
          },
          {
            headerName: "收货方-国家行政区划代码",
            field: "ecountrySubdivisioncode",
            width: 180,
          },
          {
            headerName: "牌照类型代码",
            field: "licenseplatetypecode",
            width: 120,
          },
          {
            headerName: "车辆分类代码",
            field: "vehicleClassificationCode",
            width: 120,
          },
          {
            headerName: "道路运输证号",
            field: "roadtranscertnumber",
            width: 120,
          },
          {
            headerName: "所有人",
            field: "owner",
            width: 100,
          },
          {
            headerName: "姓名",
            field: "nameofperson",
            width: 100,
          },
          {
            headerName: "从业资格证号",
            field: "quaCertNumber",
            width: 100,
          },
          {
            headerName: "货物名称",
            field: "descriptionofgoods",
            width: 100,
          },
          {
            headerName: "货物类型分类代码",
            field: "cargotypeClassCode",
            width: 150,
          },
        ],
        isRowSelectable: function (rowNode) {
          return rowNode.data ? rowNode.data.roleCode != "sysAdmin" : false;
        },
        defaultColDef: {
          singleClickEdit: true,
          editable: false, // 开启网格编辑功能
          headerCheckboxSelection: function (params) {
            var displayedColumns = params.columnApi.getAllDisplayedColumns();
            var thisIsFirstColumn = displayedColumns[0] === params.column;
            return thisIsFirstColumn;
          },
          checkboxSelection: function (params) {
            var displayedColumns = params.columnApi.getAllDisplayedColumns();
            var thisIsFirstColumn = displayedColumns[0] === params.column;
            return thisIsFirstColumn;
          },
        },
// 后端数据
        rowData: [],
      },

备注:

gridOption:表格配置

columnDefs:表格列设置

rowData:表格数据