|
@@ -1,266 +1,275 @@
|
|
|
<template>
|
|
|
- <div class="layout_container" :style="{height : XEUtils.addUnit(props.height)}">
|
|
|
+ <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/>
|
|
|
+ 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"/>
|
|
|
+ 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";
|
|
|
+<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
|
|
|
+ default: null,
|
|
|
},
|
|
|
localData: {
|
|
|
type: Array,
|
|
|
- default: null
|
|
|
+ default: null,
|
|
|
},
|
|
|
rowKey: {
|
|
|
- type: String
|
|
|
+ type: String,
|
|
|
},
|
|
|
height: {
|
|
|
type: [Number, String],
|
|
|
- default: "100%"
|
|
|
+ default: "100%",
|
|
|
},
|
|
|
localPaging: {
|
|
|
type: Boolean,
|
|
|
- default: false
|
|
|
+ default: false,
|
|
|
},
|
|
|
openPaging: {
|
|
|
type: Boolean,
|
|
|
- default: true
|
|
|
+ default: true,
|
|
|
},
|
|
|
layout: {
|
|
|
type: String,
|
|
|
- default: 'total, sizes, prev, pager, next, jumper'
|
|
|
+ default: "total, sizes, prev, pager, next, jumper",
|
|
|
},
|
|
|
small: {
|
|
|
type: Boolean,
|
|
|
- default: false
|
|
|
+ default: false,
|
|
|
},
|
|
|
pageSizes: {
|
|
|
type: Array,
|
|
|
- default: [10, 20, 30, 100]
|
|
|
+ default: [10, 20, 30, 100],
|
|
|
},
|
|
|
isArray: {
|
|
|
type: Boolean,
|
|
|
- default: false
|
|
|
+ default: false,
|
|
|
},
|
|
|
defaultExpandAll: {
|
|
|
type: Boolean,
|
|
|
- default: true
|
|
|
- }
|
|
|
-})
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+});
|
|
|
const emit = defineEmits([
|
|
|
- 'currentChange',
|
|
|
- 'sizeChange',
|
|
|
- 'rowClick',
|
|
|
- 'rowDblClick',
|
|
|
- 'selectionChange',
|
|
|
- 'rowContextmenu',
|
|
|
- 'cellClick'
|
|
|
-])
|
|
|
+ "currentChange",
|
|
|
+ "sizeChange",
|
|
|
+ "rowClick",
|
|
|
+ "rowDblClick",
|
|
|
+ "selectionChange",
|
|
|
+ "rowContextmenu",
|
|
|
+ "cellClick",
|
|
|
+]);
|
|
|
|
|
|
const cellClick = (row, column, cell, event) => {
|
|
|
- emit('cellClick', row, column, cell, event)
|
|
|
-}
|
|
|
-
|
|
|
+ emit("cellClick", row, column, cell, event);
|
|
|
+};
|
|
|
|
|
|
-const tableRef = ref(null)
|
|
|
+const tableRef = ref(null);
|
|
|
|
|
|
const tableData = computed(() => {
|
|
|
if (!props.openPaging) {
|
|
|
- return pageObject.value.data
|
|
|
+ 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)
|
|
|
+ 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)
|
|
|
+ return pageObject.value.data.slice(
|
|
|
+ (pageObject.value.currentPage - 1) * pageObject.value.pageSize,
|
|
|
+ pageObject.value.currentPage * pageObject.value.pageSize
|
|
|
+ );
|
|
|
} else {
|
|
|
- return pageObject.value.data
|
|
|
+ return pageObject.value.data;
|
|
|
}
|
|
|
-})
|
|
|
+});
|
|
|
|
|
|
-let flag = false // 默认 为全不选
|
|
|
-const selectAll = (selection) => {
|
|
|
- flag = !flag
|
|
|
+let flag = false; // 默认 为全不选
|
|
|
+const selectAll = selection => {
|
|
|
+ flag = !flag;
|
|
|
if (!flag) {
|
|
|
// 在点击了全不选中 需要清空
|
|
|
- tableRef.value.clearSelection()
|
|
|
- return
|
|
|
+ tableRef.value.clearSelection();
|
|
|
+ return;
|
|
|
}
|
|
|
- let length = selection.length
|
|
|
+ let length = selection.length;
|
|
|
for (let i = 0; i < length; i++) {
|
|
|
- let item = selection[i]
|
|
|
+ let item = selection[i];
|
|
|
if (item.children) {
|
|
|
- toggleSelection(item.children, flag)
|
|
|
+ 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)
|
|
|
+ tableRef.value.toggleRowSelection(row[i], selected);
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
-const selectionChange = (selection) => {
|
|
|
- emit('selectionChange', selection)
|
|
|
-}
|
|
|
+const selectionChange = selection => {
|
|
|
+ emit("selectionChange", selection);
|
|
|
+};
|
|
|
|
|
|
const rowClick = (row, column, event) => {
|
|
|
nextTick(() => {
|
|
|
- tableRef.value.toggleRowSelection(row)
|
|
|
+ tableRef.value.toggleRowSelection(row);
|
|
|
if (row.children) {
|
|
|
for (let i = 0, len = row.children.length; i < len; i++) {
|
|
|
- tableRef.value.toggleRowSelection(row.children[i])
|
|
|
+ tableRef.value.toggleRowSelection(row.children[i]);
|
|
|
}
|
|
|
}
|
|
|
- })
|
|
|
- emit('rowClick', row, column, event);
|
|
|
-}
|
|
|
+ });
|
|
|
+ emit("rowClick", row, column, event);
|
|
|
+};
|
|
|
|
|
|
const rowDblClick = (row, column, event) => {
|
|
|
nextTick(() => {
|
|
|
- tableRef.value.toggleRowSelection(row)
|
|
|
+ tableRef.value.toggleRowSelection(row);
|
|
|
if (row.children) {
|
|
|
for (let i = 0, len = row.children.length; i < len; i++) {
|
|
|
- tableRef.value.toggleRowSelection(row.children[i])
|
|
|
+ tableRef.value.toggleRowSelection(row.children[i]);
|
|
|
}
|
|
|
}
|
|
|
- })
|
|
|
- emit('rowDblClick', row, column, event);
|
|
|
-}
|
|
|
+ });
|
|
|
+ emit("rowDblClick", row, column, event);
|
|
|
+};
|
|
|
|
|
|
/**
|
|
|
* 取消选择或者多选
|
|
|
* @param val
|
|
|
*/
|
|
|
const toggleRowSelection = (...val) => {
|
|
|
- tableRef.value.toggleRowSelection(...val)
|
|
|
-}
|
|
|
+ tableRef.value.toggleRowSelection(...val);
|
|
|
+};
|
|
|
|
|
|
-const currentChange = (val) => {
|
|
|
+const currentChange = val => {
|
|
|
if (isLocalData.value) {
|
|
|
- pageObject.value.currentPage = val
|
|
|
+ pageObject.value.currentPage = val;
|
|
|
} else {
|
|
|
- props.data.currentPage = val
|
|
|
- emit('currentChange', val)
|
|
|
+ props.data.currentPage = val;
|
|
|
+ emit("currentChange", val);
|
|
|
}
|
|
|
- tableRef.value.setScrollTop(0)
|
|
|
-}
|
|
|
+ tableRef.value.setScrollTop(0);
|
|
|
+};
|
|
|
|
|
|
-const sizeChange = (val) => {
|
|
|
+const sizeChange = val => {
|
|
|
if (isLocalData.value) {
|
|
|
- pageObject.value.pageSize = val
|
|
|
+ pageObject.value.pageSize = val;
|
|
|
} else {
|
|
|
- props.data.pageSize = val
|
|
|
- props.data.currentPage = 1
|
|
|
+ props.data.pageSize = val;
|
|
|
+ props.data.currentPage = 1;
|
|
|
if (!props.localPaging) {
|
|
|
- props.data.total = 0
|
|
|
+ props.data.total = 0;
|
|
|
}
|
|
|
- emit('sizeChange', val)
|
|
|
+ emit("sizeChange", val);
|
|
|
}
|
|
|
- tableRef.value.setScrollTop(0)
|
|
|
-}
|
|
|
+ tableRef.value.setScrollTop(0);
|
|
|
+};
|
|
|
|
|
|
const clearSelection = (msg = true) => {
|
|
|
- tableRef.value.clearSelection()
|
|
|
+ tableRef.value.clearSelection();
|
|
|
if (msg) {
|
|
|
- ElMessage.success('清空成功。');
|
|
|
+ ElMessage.success("清空成功。");
|
|
|
}
|
|
|
-
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
const contextmenu = (row, column, event) => {
|
|
|
- event.returnValue = false
|
|
|
- event.preventDefault()
|
|
|
- emit('rowContextmenu', row)
|
|
|
-}
|
|
|
+ event.returnValue = false;
|
|
|
+ event.preventDefault();
|
|
|
+ emit("rowContextmenu", row);
|
|
|
+};
|
|
|
|
|
|
/**
|
|
|
* 获取选中的数据
|
|
|
* @returns {*}
|
|
|
*/
|
|
|
const getSelectionRows = () => {
|
|
|
- let data = tableRef.value.getSelectionRows()
|
|
|
+ let data = tableRef.value.getSelectionRows();
|
|
|
if (data.length > 0) {
|
|
|
return data;
|
|
|
}
|
|
|
- BizException(ExceptionEnum.MESSAGE_ERROR, "请先选择数据")
|
|
|
-}
|
|
|
+ BizException(ExceptionEnum.MESSAGE_ERROR, "请先选择数据");
|
|
|
+};
|
|
|
|
|
|
const pageObject = ref({
|
|
|
currentPage: 1,
|
|
|
pageSize: 30,
|
|
|
total: 0,
|
|
|
- data: []
|
|
|
-})
|
|
|
+ data: [],
|
|
|
+});
|
|
|
|
|
|
-const isLocalData = ref(false)
|
|
|
+const isLocalData = ref(false);
|
|
|
|
|
|
onMounted(() => {
|
|
|
if (props.data !== null && props.localData !== null) {
|
|
|
- throw new Error('data 和 localData 不能同时使用')
|
|
|
+ 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
|
|
|
- })
|
|
|
+ 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
|
|
|
+ pageObject.value = props.data;
|
|
|
}
|
|
|
-})
|
|
|
+});
|
|
|
|
|
|
defineExpose({
|
|
|
clearSelection,
|
|
|
getSelectionRows,
|
|
|
toggleRowSelection,
|
|
|
- tableRef
|
|
|
-})
|
|
|
-
|
|
|
+ tableRef,
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-
|
|
|
-</style>
|
|
|
+<style scoped></style>
|