XcTable.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  1. <template>
  2. <div
  3. class="layout_container"
  4. :style="{ height: XEUtils.addUnit(props.height) }"
  5. >
  6. <div class="layout_main layout_el-table">
  7. <el-table
  8. ref="tableRef"
  9. :data="tableData"
  10. @cell-click="cellClick"
  11. style="width: 100%"
  12. @selection-change="selectionChange"
  13. @row-click="rowClick"
  14. @row-dblclick="rowDblClick"
  15. highlight-current-row
  16. @row-contextmenu="contextmenu"
  17. :row-key="props.rowKey"
  18. border
  19. @select-all="selectAll"
  20. :default-expand-all="props.defaultExpandAll"
  21. stripe
  22. >
  23. <slot />
  24. </el-table>
  25. </div>
  26. <div style="height: 8px"></div>
  27. <el-pagination
  28. v-if="props.openPaging"
  29. :current-page="pageObject.currentPage"
  30. :page-size="pageObject.pageSize"
  31. :total="pageObject.total"
  32. :layout="props.layout"
  33. :small="props.small"
  34. :page-sizes="props.pageSizes"
  35. @current-change="currentChange"
  36. @size-change="sizeChange"
  37. />
  38. </div>
  39. </template>
  40. <script setup name="XcTable">
  41. import { ElMessage } from "element-plus";
  42. import { BizException, ExceptionEnum } from "@/utils/BizException";
  43. import XEUtils from "xe-utils";
  44. const props = defineProps({
  45. data: {
  46. type: Object,
  47. default: null,
  48. },
  49. localData: {
  50. type: Array,
  51. default: null,
  52. },
  53. rowKey: {
  54. type: String,
  55. },
  56. height: {
  57. type: [Number, String],
  58. default: "100%",
  59. },
  60. localPaging: {
  61. type: Boolean,
  62. default: false,
  63. },
  64. openPaging: {
  65. type: Boolean,
  66. default: true,
  67. },
  68. layout: {
  69. type: String,
  70. default: "total, sizes, prev, pager, next, jumper",
  71. },
  72. small: {
  73. type: Boolean,
  74. default: false,
  75. },
  76. pageSizes: {
  77. type: Array,
  78. default: [10, 20, 30, 100],
  79. },
  80. isArray: {
  81. type: Boolean,
  82. default: false,
  83. },
  84. defaultExpandAll: {
  85. type: Boolean,
  86. default: true,
  87. },
  88. });
  89. const emit = defineEmits([
  90. "currentChange",
  91. "sizeChange",
  92. "rowClick",
  93. "rowDblClick",
  94. "selectionChange",
  95. "rowContextmenu",
  96. "cellClick",
  97. ]);
  98. const cellClick = (row, column, cell, event) => {
  99. emit("cellClick", row, column, cell, event);
  100. };
  101. const tableRef = ref(null);
  102. const tableData = computed(() => {
  103. if (!props.openPaging) {
  104. return pageObject.value.data;
  105. }
  106. if (props.localPaging) {
  107. return props.data.data.slice(
  108. (props.data.currentPage - 1) * props.data.pageSize,
  109. props.data.currentPage * props.data.pageSize
  110. );
  111. } else if (isLocalData.value) {
  112. return pageObject.value.data.slice(
  113. (pageObject.value.currentPage - 1) * pageObject.value.pageSize,
  114. pageObject.value.currentPage * pageObject.value.pageSize
  115. );
  116. } else {
  117. return pageObject.value.data;
  118. }
  119. });
  120. let flag = false; // 默认 为全不选
  121. const selectAll = selection => {
  122. flag = !flag;
  123. if (!flag) {
  124. // 在点击了全不选中 需要清空
  125. tableRef.value.clearSelection();
  126. return;
  127. }
  128. let length = selection.length;
  129. for (let i = 0; i < length; i++) {
  130. let item = selection[i];
  131. if (item.children) {
  132. toggleSelection(item.children, flag);
  133. }
  134. }
  135. };
  136. const toggleSelection = (row, selected) => {
  137. if (row) {
  138. for (let i = 0, len = row.length; i < len; i++) {
  139. tableRef.value.toggleRowSelection(row[i], selected);
  140. }
  141. }
  142. };
  143. const selectionChange = selection => {
  144. emit("selectionChange", selection);
  145. };
  146. const rowClick = (row, column, event) => {
  147. nextTick(() => {
  148. tableRef.value.toggleRowSelection(row);
  149. if (row.children) {
  150. for (let i = 0, len = row.children.length; i < len; i++) {
  151. tableRef.value.toggleRowSelection(row.children[i]);
  152. }
  153. }
  154. });
  155. emit("rowClick", row, column, event);
  156. };
  157. const rowDblClick = (row, column, event) => {
  158. nextTick(() => {
  159. tableRef.value.toggleRowSelection(row);
  160. if (row.children) {
  161. for (let i = 0, len = row.children.length; i < len; i++) {
  162. tableRef.value.toggleRowSelection(row.children[i]);
  163. }
  164. }
  165. });
  166. emit("rowDblClick", row, column, event);
  167. };
  168. /**
  169. * 取消选择或者多选
  170. * @param val
  171. */
  172. const toggleRowSelection = (...val) => {
  173. tableRef.value.toggleRowSelection(...val);
  174. };
  175. const currentChange = val => {
  176. if (isLocalData.value) {
  177. pageObject.value.currentPage = val;
  178. } else {
  179. props.data.currentPage = val;
  180. emit("currentChange", val);
  181. }
  182. tableRef.value.setScrollTop(0);
  183. };
  184. const sizeChange = val => {
  185. if (isLocalData.value) {
  186. pageObject.value.pageSize = val;
  187. } else {
  188. props.data.pageSize = val;
  189. props.data.currentPage = 1;
  190. if (!props.localPaging) {
  191. props.data.total = 0;
  192. }
  193. emit("sizeChange", val);
  194. }
  195. tableRef.value.setScrollTop(0);
  196. };
  197. const clearSelection = (msg = true) => {
  198. tableRef.value.clearSelection();
  199. if (msg) {
  200. ElMessage.success("清空成功。");
  201. }
  202. };
  203. const contextmenu = (row, column, event) => {
  204. event.returnValue = false;
  205. event.preventDefault();
  206. emit("rowContextmenu", row);
  207. };
  208. /**
  209. * 获取选中的数据
  210. * @returns {*}
  211. */
  212. const getSelectionRows = () => {
  213. let data = tableRef.value.getSelectionRows();
  214. if (data.length > 0) {
  215. return data;
  216. }
  217. BizException(ExceptionEnum.MESSAGE_ERROR, "请先选择数据");
  218. };
  219. const pageObject = ref({
  220. currentPage: 1,
  221. pageSize: 30,
  222. total: 0,
  223. data: [],
  224. });
  225. const isLocalData = ref(false);
  226. onMounted(() => {
  227. if (props.data !== null && props.localData !== null) {
  228. throw new Error("data 和 localData 不能同时使用");
  229. }
  230. if (props.localData !== null) {
  231. pageObject.value.data = props.localData;
  232. pageObject.value.total = props.localData.length;
  233. pageObject.value.currentPage = 1;
  234. pageObject.value.pageSize = 30;
  235. isLocalData.value = true;
  236. watch(
  237. () => props.localData,
  238. () => {
  239. pageObject.value.data = props.localData;
  240. pageObject.value.total = props.localData.length;
  241. }
  242. );
  243. } else {
  244. pageObject.value = props.data;
  245. }
  246. });
  247. defineExpose({
  248. clearSelection,
  249. getSelectionRows,
  250. toggleRowSelection,
  251. tableRef,
  252. });
  253. </script>
  254. <style scoped></style>