WZC2/fe/UI.DY.AgGridReport/src/components/AgTable/index.vue

<template>
  <div class="AgTableComponent">
    <AgGridVue
      :style="`width: 100%; height: ${tableHeight}`"
      class="ag-theme-alpine"
      :columnDefs="columnDefs"
      @grid-ready="onGridReady"
      :defaultColDef="defaultColDef"
      :suppressDragLeaveHidesColumns="true"
      :columnResized="columnResized"
      @filterChanged="onFilterAndSortChanged"
      @sortChanged="onFilterAndSortChanged"
      :pagination="true"
      :suppressPaginationPanel="true"
    ></AgGridVue>
    <div class="paginationContent">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="pageSizes"
        :page-size="currentPageSize"
        :current-page="currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
      </el-pagination>
    </div>
  </div>
</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:[]
      },
      // 底部汇总配置-平均值
      averageFixedItem:{
        type: Array,
        default: null
      },
    },
    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,
            pageSizes:[10, 20,100, 300, 500, 1000, 3000, 5000, 10000],
            pageTotal:null,
            currentPage:1,
            currentPageSize:100,
            allPageData:null,//所有前端数据
        };
    },
    mounted(){
        this.setTableHeight()
    },
    methods: {
      // 每页显示条数变化
      handleSizeChange(value){
        this.currentPageSize = Number(value)
        this.gridApi.paginationSetPageSize(Number(value));
        this.setTableTotal(this.gridApi)
      },
      // 页码更改
      handleCurrentChange(value){
        this.currentPage = Number(value)
        this.gridApi.paginationGoToPage(Number(value) - 1);
        this.setTableTotal(this.gridApi)
      },
      // 获取当前页面的数据
      getCurrentPageData(gridApi){
        this.allPageData = [];
        gridApi.forEachNodeAfterFilterAndSort(node => {
          this.allPageData.push(node.data)
        });
        let _begin = (this.currentPage - 1) * this.currentPageSize
        let _end = this.currentPage * this.currentPageSize
        let _pageData = this.allPageData.slice(_begin,_end)
        return _pageData
      },
      // 筛选后操作
      onFilterAndSortChanged(data){
        this.gridApi = data.api
        this.handleCurrentChange(1)
        // this.setTableTotal(data.api)
      },
      // 自适应高度
      columnResized(event){
        if(event.finished){
          this.gridApi.resetRowHeights()
        }
      },
      // 总计
      setTableTotal(gridApi) {
        // 设置页码器
        let _pageData = this.getCurrentPageData(gridApi)
        this.pageTotal = this.allPageData.length
        // 设置底部汇总
        if(!this.BottomFixedItem || this.BottomFixedItem.length <= 0)return
        let result = [{}]
        this.BottomFixedItem.forEach(item=>{
          result[0][item] = 0
        })
        _pageData.forEach((item,key) => {
          for(let o in item){
            if(this.BottomFixedItem.indexOf(o) >= 0){
              result[0][o] += Number(item[o])
            }
          }
        });
        // 平均值的特殊处理
        if(this.averageFixedItem){
          for(let i in result[0]){
            if(this.averageFixedItem.indexOf(i) >= 0){
              result[0][i] = result[0][i]/_pageData.length
            }
          }
        }
        this.gridApi.setPinnedBottomRowData(result);
    },
    // 设置表格高度
      setTableHeight(){
        let _headerH = document.getElementsByClassName('reportPageHeader')[0].clientHeight
        let _footH = 50;
        
        let _outH = _headerH + _footH
        this.tableHeight = `calc(100vh - ${_outH}px)`
      },
    //   更新table值
      updateTableData(data){
        this.currentPage = 1
        this.gridApi.setRowData(data)
        this.setTableTotal(this.gridApi)
        this.gridApi.resetRowHeights();
      },
    //   加载agGrid
      onGridReady(params) {
        this.gridApi = params.api;
        this.gridColumnApi = params.columnApi;
      },
    },
};
</script>
<style lang="less">
.AgTableComponent{
  .ag-unselectable{
    user-select:text !important
  }
  .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-border-color:#4d709f;

    --ag-header-foreground-color: #333;
    --ag-header-background-color: #f2f2f2;
    --ag-header-cell-hover-background-color: #f2f2f2;
    --ag-header-cell-moving-background-color: #f2f2f2;
    --ag-border-color:#cecece;

    .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;
      }

      &.stateTag_danger{
        background:#ff2f00;
        justify-content: center;
        color:#fff
      }

      &.stateTag_warning{
        background:#ff9000;
        justify-content: center;
        color:#fff
      }

      &.stateTag_success{
        background:green;
        justify-content: center;
        color:#fff
      }
    }

    .ag-cell-value{
      overflow: unset;
      text-overflow: unset;
      word-break:break-all;
      padding-top:5px;
      padding-bottom:5px
    }
  }
  .paginationContent{
    padding:0 20px;
    display:flex;
    height:50px;
    justify-content:flex-end;
    align-items:center;
  }
}
</style>