docking-vue/src/components/table/index.vue

<template>
  <el-table
    ref="tableRef"
    size="small"
    :data="data"
    :border="border"
    :stripe="stripe"
    :height="height"
    :max-height="maxHeight"
    :highlight-current-row="highlightCurrentRow"
    :row-key="getRowKey"
    :row-class-name="rowClassName"
    :row-style="rowStyle"
    :show-header="showHeader"
    :show-summary="showSummary"
    :summary-method="summaryMethod"
    :span-method="spanMethod"
    :default-expand-all="defaultExpandAll"
    :tree-props="treeProps"
    :header-cell-style="headerCellStyle"
    :cell-style="cellStyle"
    @row-click="rowClick"
    @row-dblclick="rowDblclick"
  >
    <el-table-column
      v-if="showSelection"
      type="selection"
      reserve-selection
      width="60"
    />
    <el-table-column v-if="showIndex" label="序号" width="60">
      <template #default="{ $index }">
        {{ serialNumber(pagination, $index) }}
      </template>
    </el-table-column>
    <slot></slot>
  </el-table>
  <div v-if="showPagination || slots.button" class="table_footer">
    <div>
      <slot name="button"></slot>
    </div>
    <app-pagination
      v-if="showPagination"
      v-model:pagination="pagination"
      @get-data="emits('get-data')"
    />
  </div>
</template>

<script setup>
import { useSlots, useTemplateRef } from "vue";
import AppPagination from "@/components/pagination/index.vue";
import { serialNumber } from "@/assets/js/utils.js";

const slots = useSlots();
defineOptions({
  name: "AppTable",
});
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  showPagination: {
    type: Boolean,
    default: true,
  },
  showIndex: {
    type: Boolean,
    default: true,
  },
  showSelection: {
    type: Boolean,
    default: false,
  },
  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,
  },
  rowStyle: {
    type: Function,
  },
  summaryMethod: {
    type: Function,
  },
  spanMethod: {
    type: Function,
  },
  treeProps: {
    type: Object,
    default: () => ({ hasChildren: "hasChildren", children: "children" }),
  },
  headerCellStyle: {
    type: Object,
    default: () => ({}),
  },
  cellStyle: {
    type: Object,
    default: () => ({}),
  },
});
const pagination = defineModel("pagination", {
  type: Object,
  default: () => ({
    currentPage: 1,
    pageSize: 10,
    total: 0,
  }),
});
const emits = defineEmits(["get-data", "row-click", "row-dblclick"]);
const tableRef = useTemplateRef("tableRef");
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>