EDFS-MCU/src/components/Edfs-table/index.vue

<template>
  <div class="edfs-table-components">
    <el-table
      :data="data"
      :fit="fit"
      :stripe="stripe"
      :border="border"
      v-loading="loading"
      :show-header="showHeader"
      :max-height="maxHeight"
      :highlight-current-row="highlightCurrentRow"
      :row-class-name="rowClassName"
      @current-change="onCurrentChange"
      ref="ELTableRef"
      @row-click="onRowClick"
      @row-dblclick="onRowDblclick"
      @selection-change="handleSelectionChange"
      class="edfs-table"
      :span-method="spanMethod"
    >
      <slot></slot>
    </el-table>
    <template v-if="usePaging">
      <div class="pagination-block">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :width-type="1"
          layout="prev, pager, next, jumper"
          :total="pageTotal"
          background
          @current-change="onPageCurrentChange"
        />

        <!-- @size-change="onPageSizeChange" -->
      </div>
    </template>
  </div>
</template>

<script setup lang="ts" generic="T">
import { ElTable } from 'element-plus'
import { type Props } from './defaults'

const props = withDefaults(defineProps<Props<T>>(), {
  fit: true,
  showHeader: true,
  usePaging: true,
  currentPage: 1,
  pageTotal: 15,
  loading: false,
})


const emit = defineEmits<{
  'current-change': [currentRow: any, oldCurrentRow: any]
  'row-click': [row: any, column: any, event: Event]
  'row-dblclick': [row: any, column: any, event: Event]
  // 'page-size-change': [pageSize: number]
  'page-current-change': [currentPage: number]
  'selection-change': [selection: any[]]
}>()

function onCurrentChange(currentRow: any, oldCurrentRow: any) {
  emit('current-change', currentRow, oldCurrentRow)
}
function onRowClick(row: any, column: any, event: Event) {
  emit('row-click', row, column, event)
}
function onRowDblclick(row: any, column: any, event: Event) {
  emit('row-dblclick', row, column, event)
}

function handleSelectionChange(selection: any[]) {
  emit('selection-change', selection)
}

// 分页
const pageSize = ref()

watch(
  () => props.pageSize,
  val => {
    pageSize.value = val
  }
)

const currentPage = ref()
watch(
  () => props.currentPage,
  val => {
    currentPage.value = val
  }
)

// function onPageSizeChange(pageSize: number) {
//   emit('page-size-change', pageSize)
// }
function onPageCurrentChange(currentPage: number) {
  emit('page-current-change', currentPage)
}

function getSize() {
  const el = document.querySelector('.edfs-table-components')
  if (!el) return 18
  const height = Math.floor(el.getBoundingClientRect().height)
  return Math.ceil(height / 40)
}

const ELTableRef = ref<InstanceType<typeof ElTable>>()
function clearSelection() {
  ELTableRef.value?.clearSelection()
}

defineExpose({
  getSize,
  clearSelection,
})
</script>

<style lang="scss" scoped>
.edfs-table-components {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  // background-color: #fff;
  .edfs-table {
    width: 100%;
    height: 100%;
    font-size: 14px;
  }

  :deep(.el-table th.el-table__cell) {
    background-color: var(--table-header-bg);
    font-family: Alibaba-PuHuiTi-M;
    font-size: 14px;
    color: var(--table-header-text-color);
    font-weight: 500;
  }

  :deep(.el-table__row .cell) {
    font-family: Alibaba-PuHuiTi-R;
    line-height: 16px;
    min-height: 20px;
    font-weight: 400;
    color: var(--text-color);
  }

  .pagination-block {
    user-select: none;
    display: flex;
    // place-content: center;
    align-items: center;
    justify-content: end;
    height: 60px;
    :deep(.el-pagination__editor.el-input) {
      width: 66px;
    }
    :deep(.el-input__wrapper) {
      height: 30px;
      margin-left: 8px;
      padding: 0 10px;
      .el-input__inner {
        font-size: 14px;
        height: 100%;
      }
    }
    :deep(.el-pagination) {
      // width: cvw(200);
    }
    :deep(.el-pagination),
    :deep(.el-pagination .el-icon),
    :deep(.el-pagination li) {
      font-size: 14px;
    }

    :deep(.el-pagination .btn-next),
    :deep(.el-pagination .btn-prev),
    :deep(.el-pagination li) {
      background-color: transparent;
    }
    :deep(.el-pager) {
      height: 28px;
    }

    :deep(.el-pagination li) {
      min-width: 28px;
      height: 28px;
      border-radius: 2px;
      border: 1px solid var(--pagination-border-color);
      background-color: var(--pagination-bg);

      &:hover {
        color: #619925;
      }
    }
    :deep(.is-active) {
      color: #619925 !important;
      background: rgba(97, 153, 37, 0.06) !important;
      border: 1px solid rgba(97, 153, 37, 1) !important;
      border-radius: 2px;
    }
    :deep(.el-input__wrapper) {
      background-color: var(--pagination-bg);
    }
  }
}
</style>