bigDataStudent/src/views/targetImprove/components/Table.vue

<template>
  <div class="page_table">
    <el-table
      :height="height"
      class="el-table--border"
      ref="tableRef"
      :show-header="showHeader"
      :data="tableData"
      stripe
      v-loading="loading"
      element-loading-text="拼命加载中……"
      element-loading-spinner="el-icon-loading"
      element-loading-background="#ffffff"
      element-loading-custom-class="loading_icon"
      :row-class-name="tableRowClassName"
      @row-click="(row, column) => $emit('rowClick', row)"
      :span-method="spanMethod"
    >
      <template v-for="(item, index) in tableColumns">
        <el-table-column
          :key="item?.name"
          v-if="!item.hidden"
          :prop="item.name"
          :min-width="item.minWidth"
          :width="item.width"
          :label="item.label"
          :fixed="item.fixed ? item.fixed : false"
          :align="item.align"
        >
          <template v-if="item.customHeader" v-slot:header>
            <slot :name="'header-' + item.name"></slot>
          </template>

          <template v-if="item.custom" v-slot:default="row">
            <slot :name="item.name" :row="row.row" :currentIndex="(row.$index + 1)"></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>

    <div class="page_pagination" v-if="!hidePagination">
      <slot name="paginationDesc"></slot>
      <el-pagination
        :hide-on-single-page="hidesinglePage"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[20, 50, 100]"
        background
        :layout="(showPageSize ? 'sizes,' : '') + 'prev, pager, next'"
        :total="Number(totalNum)"
        @current-change="(val) => $emit('paginationChange', { type: 'currentPage', val })"
        @size-change="(val) => $emit('paginationChange', { type: 'pageSize', val })"
      />
    </div>
  </div>
</template>

<script>
/*
interface tableColumnItm  {
  name:String,
  label:String,
  width?:String,
  fixed?:String,
  align?:String,
  minWidth?:String,
  custom:Boolean,
  customHeader?:Boolean,
  hidden:Boolean,
}
*/
export default {
  name: 'Table',
  props: {
    tableData: {
      type: Array,
      required: true
    },
    tableColumns: {
      type: Array,  //类型为 tableColumnItm[]
      required: true
    },
    currentPage: {
      type: Number,
      default: 1
    },
    showPageSize:{
      type:Boolean,
      default:false
    },
    pageSize: {
      type: Number,
      default: 20
    },
    totalNum: {
      type: Number,
      default: 0
    },
    loading: {
      type: Boolean,
      default: false
    },
    hidesinglePage: {
      type: Boolean
    },
    hidePagination: {
      type: Boolean,
      default: false
    },
    spanMethod: {
      type: Function,
      required: false
    },
    tableRowClassName: {
      type: Function,
      required: false
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    height:{
      type:String,
      default:'calc(100%)'
    }

  },
  data() {
    return {
      // Vue 2 中没有 defineModel，tableRef 仅作为内部状态或普通 ref
      // 父组件获取表格实例请使用 this.$refs.tableRef
      tableRef: null 
    };
  },
  mounted(){

    
    /*  
    //demo
    HandleSpanMethod({row,column,rowIndex,columnIndex}){
        if(['type'].includes(column.property)){
            return {
            rowspan: row.sameRow,
            colspan: 1,
            }
        }
    }
    HandleTableRowClassName({row,rowIndex}){
      if(row.parentIndex % 2 == 0){
        // 偶数行
        return 'even_row'
      }else{
        // 奇数行
        return 'odd_row'
      }
    }
    */

  }
};
</script>

<style lang="scss" scoped>
.page_table {
  // flex-shrink: 0;
  // overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  ::v-deep .el-table {
    tr th.el-table__cell {
      font-size: 14px;
    }
    .el-table__body-wrapper{
        overflow: auto;
    }
  }

  .el-table {
    flex-grow: 1;
    ::v-deep .el-scrollbar__view {
      height: 100%;
    }
  }

  ::v-deep .el-table__body {
    tbody tr.even_row td {
      background-color: white;
    }
    tbody tr.odd_row td {
      background-color: rgb(250, 250, 250);
    }
    tbody tr.hover-row td {
      background-color: rgb(245, 247, 250) !important; 
    }
    tbody tr td:last-child:not([rowspan="1"]) {
      border-left: solid rgba(235, 238, 245) 1px;
    }
  }
}

::v-deep .loading_icon {
  .el-loading-spinner {
    .el-loading-text {
      color: #2e64fa;
    }
  }
}
</style>