WMS_IAC_FE/PC/UI.WinIn.FasterZ.AgGridReport/src/components/AgTable/index.vue

<template>
  <AgGridVue
    :style="`width: 100%; height: ${tableHeight}`"
    class="ag-theme-alpine"
    :columnDefs="columnDefs"
    @grid-ready="onGridReady"
    :defaultColDef="defaultColDef"
    :suppressDragLeaveHidesColumns="true"
    :columnResized="columnResized"
    @filterChanged="onFloatingFilterChanged"
  ></AgGridVue>
</template>
<script>
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import { AgGridVue } from 'ag-grid-vue';
export default {
    name: "AgTable",
    components: {
      AgGridVue
    },
    props:{
      // 列数据
      columnDefs:{
          type: Array,
          default: null
      },
      // 底部汇总元素
      BottomFixedItem:{
        type:Array,
        default:[]
      },
    },
    data () {
        return {
            gridApi: null,
            gridColumnApi: null,
            defaultColDef: {
                flex: 1,
                filter: true,
                sortable: true,
                floatingFilter: true,
                resizable:true,
                cellClass:"cell-wrap-text",
                headerClass: 'ag-header-center',
                autoHeight:true
            },
            tableHeight:null,
            // pagination: true,  //开启分页（前端分页）
            // paginationAutoPageSize: true, //根据网页高度自动分页（前端分页）
        };
    },
    mounted(){
        this.setTableHeight()
    },
    methods: {
      // 筛选后操作
      onFloatingFilterChanged(data){
        const allData = [];
        data.api.forEachNodeAfterFilter(node => {
          allData.push(node.data)
        });
        this.setTableTotal(allData)
      },
      // 自适应高度
      columnResized(event){
        if(event.finished){
          this.gridApi.resetRowHeights()
        }
      },
      // 总计
      setTableTotal(list) {
        if(!this.BottomFixedItem || this.BottomFixedItem.length <= 0)return
        let result = [{}]
        this.BottomFixedItem.forEach(item=>{
          result[0][item] = 0
        })
        list.forEach((item,key) => {
          for(let o in item){
            if(this.BottomFixedItem.indexOf(o) >= 0){
              result[0][o] += item[o]
            }
          }
        });
        this.gridApi.setPinnedBottomRowData(result);
    },
    // 设置表格高度
      setTableHeight(){
        let _headerH = document.getElementsByClassName('reportPageHeader')[0].clientHeight + 10
        this.tableHeight = `calc(100% - ${_headerH}px)`
      },
    //   更新table值
      updateTableData(data){
        this.gridApi.setRowData(data)
        this.setTableTotal(data)
        this.gridApi.resetRowHeights();
      },
    //   加载agGrid
      onGridReady(params) {
        this.gridApi = params.api;
        this.gridColumnApi = params.columnApi;
      },
    },
};
</script>
<style lang="less">
.ag-theme-alpine{
    --ag-header-foreground-color: white;
    --ag-header-background-color: #5a81b7;
    --ag-header-cell-hover-background-color: #5a81b7;
    --ag-header-cell-moving-background-color: #5a81b7;

    .ag-floating-filter-input .ag-input-field-input{
      color:#333 !important
    }

    .ag-header-icon{
      color:#fff !important
    }

    .cell-wrap-text{
      white-space:normal !important
    }

    .ag-row-pinned{
      background:#5a81b7;
      color:#fff;
      font-weight:bold
    }
  
    .ag-cell{
      line-height:unset;
      display: flex;
      align-items: center;

      &.rightAlign{
        justify-content: flex-end;
      }

      &.centerAlign{
        justify-content: center;
      }
    }

    .ag-cell-value{
      overflow: unset;
      text-overflow: unset;
      word-break:break-all;
      padding-top:5px;
      padding-bottom:5px
    }
}
</style>