teacher-assessment/src/baseComponents/Table.vue

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

                  <template v-if="item.customHeader" #header>
                    <slot :name="'header-'+item.name"></slot>
                  </template>
                
                  <template v-if="item.custom" #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)">
          <!-- background layout="sizes, prev, pager, next"  -->
          <el-pagination 
            :hide-on-single-page="props.hidesinglePage"
            :current-page="props.currentPage" 
            :page-size="props.pageSize" 
            :page-sizes="[20, 50, 100]" 
            background layout="prev, pager, next" 
            :total="Number(props.totalNum)" 
            @current-change="(val)=>emit('paginationChange',{type:'currentPage',val})" 
            @size-change="(val)=>emit('paginationChange',{type:'pageSize',val})" />
        </div>
    </div>
</template>

<script setup lang="ts">
interface ColumnProperty  {
  name:String,
  label:String,
  width?:String,
  fixed?:String,
  align?:String,
  minWdth?:String,
  custom:String,
  customHeader?:Boolean,
  hidden:Boolean,
}
const props = defineProps({
  tableData:{
    required:true,
    type:Array
  },
  tableColumns:{
    required:true,
    type:Array<ColumnProperty>
  },
  currentPage:{
    required:true,
    type:Number
  },
  pageSize:{
    required:true,
    type:Number
  },
  totalNum:{
    required:true,
    type:Number
  },
  loading:{
    type:Boolean,
    default:false
  },
  hidesinglePage:{
    type:Boolean,
  },
  hidePagination:{
    type:Boolean,
    default:false
  },
  spanMethod:{
    type:Function,
    required:false
  },
  tableRowClassName:{
    type:Function,
    required:false
  }
})
const emit = defineEmits(['paginationChange','rowClick'])

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

</script>

<style lang="scss" scoped>
.page_table{
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  .el-table{
    flex-grow: 1;
    :deep(.el-scrollbar__view){
      height: 100%;
    }
  }

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

:deep(.loading_icon){
  .el-loading-spinner{
    .el-loading-text{
      color:#2e64fa;
    }
  }
}


</style>