123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275 |
- <template>
- <div
- class="layout_container"
- :style="{ height: XEUtils.addUnit(props.height) }"
- >
- <div class="layout_main layout_el-table">
- <el-table
- ref="tableRef"
- :data="tableData"
- @cell-click="cellClick"
- style="width: 100%"
- @selection-change="selectionChange"
- @row-click="rowClick"
- @row-dblclick="rowDblClick"
- highlight-current-row
- @row-contextmenu="contextmenu"
- :row-key="props.rowKey"
- border
- @select-all="selectAll"
- :default-expand-all="props.defaultExpandAll"
- stripe
- >
- <slot />
- </el-table>
- </div>
- <div style="height: 8px"></div>
- <el-pagination
- v-if="props.openPaging"
- :current-page="pageObject.currentPage"
- :page-size="pageObject.pageSize"
- :total="pageObject.total"
- :layout="props.layout"
- :small="props.small"
- :page-sizes="props.pageSizes"
- @current-change="currentChange"
- @size-change="sizeChange"
- />
- </div>
- </template>
- <script setup name="XcTable">
- import { ElMessage } from "element-plus";
- import { BizException, ExceptionEnum } from "@/utils/BizException";
- import XEUtils from "xe-utils";
- const props = defineProps({
- data: {
- type: Object,
- default: null,
- },
- localData: {
- type: Array,
- default: null,
- },
- rowKey: {
- type: String,
- },
- height: {
- type: [Number, String],
- default: "100%",
- },
- localPaging: {
- type: Boolean,
- default: false,
- },
- openPaging: {
- type: Boolean,
- default: true,
- },
- layout: {
- type: String,
- default: "total, sizes, prev, pager, next, jumper",
- },
- small: {
- type: Boolean,
- default: false,
- },
- pageSizes: {
- type: Array,
- default: [10, 20, 30, 100],
- },
- isArray: {
- type: Boolean,
- default: false,
- },
- defaultExpandAll: {
- type: Boolean,
- default: true,
- },
- });
- const emit = defineEmits([
- "currentChange",
- "sizeChange",
- "rowClick",
- "rowDblClick",
- "selectionChange",
- "rowContextmenu",
- "cellClick",
- ]);
- const cellClick = (row, column, cell, event) => {
- emit("cellClick", row, column, cell, event);
- };
- const tableRef = ref(null);
- const tableData = computed(() => {
- if (!props.openPaging) {
- return pageObject.value.data;
- }
- if (props.localPaging) {
- return props.data.data.slice(
- (props.data.currentPage - 1) * props.data.pageSize,
- props.data.currentPage * props.data.pageSize
- );
- } else if (isLocalData.value) {
- return pageObject.value.data.slice(
- (pageObject.value.currentPage - 1) * pageObject.value.pageSize,
- pageObject.value.currentPage * pageObject.value.pageSize
- );
- } else {
- return pageObject.value.data;
- }
- });
- let flag = false; // 默认 为全不选
- const selectAll = selection => {
- flag = !flag;
- if (!flag) {
- // 在点击了全不选中 需要清空
- tableRef.value.clearSelection();
- return;
- }
- let length = selection.length;
- for (let i = 0; i < length; i++) {
- let item = selection[i];
- if (item.children) {
- toggleSelection(item.children, flag);
- }
- }
- };
- const toggleSelection = (row, selected) => {
- if (row) {
- for (let i = 0, len = row.length; i < len; i++) {
- tableRef.value.toggleRowSelection(row[i], selected);
- }
- }
- };
- const selectionChange = selection => {
- emit("selectionChange", selection);
- };
- const rowClick = (row, column, event) => {
- nextTick(() => {
- tableRef.value.toggleRowSelection(row);
- if (row.children) {
- for (let i = 0, len = row.children.length; i < len; i++) {
- tableRef.value.toggleRowSelection(row.children[i]);
- }
- }
- });
- emit("rowClick", row, column, event);
- };
- const rowDblClick = (row, column, event) => {
- nextTick(() => {
- tableRef.value.toggleRowSelection(row);
- if (row.children) {
- for (let i = 0, len = row.children.length; i < len; i++) {
- tableRef.value.toggleRowSelection(row.children[i]);
- }
- }
- });
- emit("rowDblClick", row, column, event);
- };
- /**
- * 取消选择或者多选
- * @param val
- */
- const toggleRowSelection = (...val) => {
- tableRef.value.toggleRowSelection(...val);
- };
- const currentChange = val => {
- if (isLocalData.value) {
- pageObject.value.currentPage = val;
- } else {
- props.data.currentPage = val;
- emit("currentChange", val);
- }
- tableRef.value.setScrollTop(0);
- };
- const sizeChange = val => {
- if (isLocalData.value) {
- pageObject.value.pageSize = val;
- } else {
- props.data.pageSize = val;
- props.data.currentPage = 1;
- if (!props.localPaging) {
- props.data.total = 0;
- }
- emit("sizeChange", val);
- }
- tableRef.value.setScrollTop(0);
- };
- const clearSelection = (msg = true) => {
- tableRef.value.clearSelection();
- if (msg) {
- ElMessage.success("清空成功。");
- }
- };
- const contextmenu = (row, column, event) => {
- event.returnValue = false;
- event.preventDefault();
- emit("rowContextmenu", row);
- };
- /**
- * 获取选中的数据
- * @returns {*}
- */
- const getSelectionRows = () => {
- let data = tableRef.value.getSelectionRows();
- if (data.length > 0) {
- return data;
- }
- BizException(ExceptionEnum.MESSAGE_ERROR, "请先选择数据");
- };
- const pageObject = ref({
- currentPage: 1,
- pageSize: 30,
- total: 0,
- data: [],
- });
- const isLocalData = ref(false);
- onMounted(() => {
- if (props.data !== null && props.localData !== null) {
- throw new Error("data 和 localData 不能同时使用");
- }
- if (props.localData !== null) {
- pageObject.value.data = props.localData;
- pageObject.value.total = props.localData.length;
- pageObject.value.currentPage = 1;
- pageObject.value.pageSize = 30;
- isLocalData.value = true;
- watch(
- () => props.localData,
- () => {
- pageObject.value.data = props.localData;
- pageObject.value.total = props.localData.length;
- }
- );
- } else {
- pageObject.value = props.data;
- }
- });
- defineExpose({
- clearSelection,
- getSelectionRows,
- toggleRowSelection,
- tableRef,
- });
- </script>
- <style scoped></style>
|