zy-vue-library/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"
    :show-overflow-tooltip="showOverflowTooltip"
    style="width: 100%"
    @row-click="rowClick"
    @row-dblclick="rowDblclick"
  >
    <el-table-column
      v-if="showSelection"
      type="selection"
      :selectable="selectable"
      reserve-selection
      width="60"
      :show-overflow-tooltip="false"
    />
    <template v-if="showIndex">
      <el-table-column v-if="showPagination" label="序号" width="60">
        <template #default="{ $index }">
          {{ serialNumber(pagination, $index) }}
        </template>
      </el-table-column>
      <el-table-column v-if="!showPagination" label="序号" width="60" type="index" />
    </template>
    <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 { ElTable, ElTableColumn } from "element-plus";
import "element-plus/es/components/table/style/css";
import "element-plus/es/components/table-column/style/css";
import AppPagination from "../pagination/index.vue";
import { serialNumber } from "../../utils/index.js";

const slots = useSlots();
defineOptions({
  name: "AppTable",
});
const props = defineProps({
  data: { type: Array, required: true },
  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 },
  selectable: { type: Function },
  treeProps: {
    type: Object,
    default: () => ({ hasChildren: "hasChildren", children: "children" }),
  },
  headerCellStyle: { type: Object, default: () => ({}) },
  cellStyle: { type: [Object, Function], default: () => ({}) },
  showOverflowTooltip: { type: Boolean, default: true },
});
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>