136 lines
4.0 KiB
Vue
136 lines
4.0 KiB
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>
|