integrated_traffic_vue/src/components/table/index.vue

<template>
  <el-table
    ref="tableRef"
    size="small"
    :data="props.data"
    :border="border"
    :stripe="stripe"
    :height="height"
    :max-height="maxHeight"
    :highlight-current-row="highlightCurrentRow"
    :row-key="getRowKey"
    :row-class-name="rowClassName"
    :show-header="showHeader"
    :show-summary="showSummary"
    :summary-method="summaryMethod"
    :span-method="spanMethod"
    :default-expand-all="defaultExpandAll"
    :tree-props="treeProps"
    @row-click="rowClick"
    @row-dblclick="rowDblclick"
  >
    <slot></slot>
  </el-table>
  <div class="table_footer">
    <div>
      <slot name="button"></slot>
    </div>
    <el-pagination
      v-if="props.showPagination"
      small
      :current-page="props.pagination.currentPage || 1"
      :page-size="props.pagination.pageSize || 10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="props.pagination.total || 0"
      @update:current-page="handleCurrentChange"
      @update:page-size="handleSizeChange"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";

defineOptions({
  name: "LayoutTable",
});
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  pagination: {
    type: Object,
    default: () => ({
      currentPage: 1,
      pageSize: 10,
      total: 0,
    }),
  },
  showPagination: {
    type: Boolean,
    default: true,
  },
  stripe: {
    type: Boolean,
    default: true,
  },
  border: {
    type: Boolean,
    default: true,
  },
  showHeader: {
    type: Boolean,
    default: true,
  },
  highlightCurrentRow: {
    type: Boolean,
    default: false,
  },
  showSummary: {
    type: Boolean,
    default: false,
  },
  defaultExpandAll: {
    type: Boolean,
    default: false,
  },
  rowKey: {
    type: [String, Function],
  },
  maxHeight: {
    type: [String, Number],
  },
  height: {
    type: [String, Number],
  },
  rowClassName: {
    type: Function,
  },
  summaryMethod: {
    type: Function,
  },
  spanMethod: {
    type: Function,
  },
  treeProps: {
    type: Object,
    default: () => ({ hasChildren: "hasChildren", children: "children" }),
  },
});
const emits = defineEmits([
  "update:pagination",
  "get-data",
  "row-click",
  "row-dblclick",
]);
const tableRef = ref(null);
const handleCurrentChange = (val) => {
  emits("update:pagination", {
    currentPage: val,
    pageSize: props.pagination.pageSize,
    total: props.pagination.total,
  });
  emits("get-data");
};
const handleSizeChange = (val) => {
  emits("update:pagination", {
    currentPage: 1,
    pageSize: val,
    total: props.pagination.total,
  });
  emits("get-data");
};
const getRowKey = (row) => {
  if (!props.rowKey) return;
  if (typeof props.rowKey === "string") return row[props.rowKey];
  else return props.rowKey(row);
};
const rowClick = (row, column, event) => {
  emits("row-click", row, column, event);
};
const rowDblclick = (row, column, event) => {
  emits("row-dblclick", row, column, event);
};
const getSelectionRows = () => {
  return tableRef.value.getSelectionRows();
};
const clearSelection = () => {
  return tableRef.value.clearSelection();
};
const toggleRowSelection = (value, selected = true) => {
  tableRef.value.toggleRowSelection(value, selected);
};
defineExpose({
  getSelectionRows,
  clearSelection,
  toggleRowSelection,
});
</script>

<style lang="scss" scoped>
.table_footer {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
</style>