client-base-v5/src/workflow/CommonTable.vue

<template>
  <!-- 表格 + 分页 -->
  <div class="tablePaganations">
      <a-table
        class="ant-table-striped"
        bordered
        size="small"
        height="1000px"
        :loading="isLoading"
        :data-source="dataSource"
        :columns="columns"
        :scroll="{ y: 1000}"
        :pagination="pagination"
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
      >
        <template v-for="(item,index) in renderArr" #[item]="scope" :key="index">
          <slot :name="item" :scope="scope" v-bind="scope || {}" />
        </template>
      </a-table>
  </div>
</template>
  
<script setup>
import { useSlots, ref, reactive, defineProps, defineEmits, defineExpose, watch } from 'vue';

const props = defineProps({
  dataSource: {
    type: Object,
    required: true,
  },
  columns: {
    type: Object,
    required: true,
  },
  isSelect: {
    type: Boolean,
  },
  isLoading: {
    type: Boolean,
  },
  total: {
    type: Number,
    default: 0,
  },
});

// 分页配置
const pagination = reactive({
  showQuickJumper: true,
  current: 1,
  pageSize: 20, // 默认每页显示数量
  showSizeChanger: true, // 显示可改变每页数量
  pageSizeOptions: ['10', '20', '50', '100','200','500'], // 每页数量选项值
  showTotal: (total, range) => range[0] + '-' + range[1] + '条' + ' 共' + total + '条', // 显示总数
  onShowSizeChange: (current, pageSize) => showSizeChange(current, pageSize),
  onChange: (current, pageSize) => changePage(current, pageSize), //点击页码事件
  total: props.total,
});

const emit = defineEmits(['getPage']);
// 改变每页数量时更新显示
const showSizeChange = (current, pageSize) => {
  setTimeout(() => {
    pagination.current = 1;
    emit('getPage', pagination.current, pageSize);
  });
  pagination.pageSize = pageSize;
};
//点击页码事件
const changePage = (current, size) => {
  pagination.current = current;
  emit('getPage', pagination.current, size);
};
// 回到第一页
const backFirstPage = () => {
  pagination.current = 1;
  emit('getPage', pagination.current,pagination.pageSize);
};
defineExpose({ backFirstPage });

// 监听total变化
watch(
  props,
  newData => {
    pagination.total = newData.total;
  },
  { immediate: true, deep: true },
);
// 插槽的实例
const slots = useSlots();
const renderArr = Object.keys(slots);
</script>
<style scoped>
.tablePaganations {
  width: 100%;
  margin-top: 20px;
}
.ant-table-striped :deep(.table-striped) td {
  background-color:  #fafafa;
}
</style>