-
Notifications
You must be signed in to change notification settings - Fork 43
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
7 changed files
with
238 additions
and
130 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import { success, fail } from '../helper'; | ||
| export default [ | ||
| { | ||
| url: '/api/table/list', | ||
| method: 'get', | ||
| timeout: 500 + Math.floor(Math.random() * 1000), | ||
| response: () => { | ||
| return success([ | ||
| { | ||
| date: '2016-05-03', | ||
| name: '张三', | ||
| province: '北京', | ||
| city: '北京', | ||
| address: '开发大街1350号', | ||
| zip: '100000', | ||
| }, | ||
| { | ||
| date: '2016-05-02', | ||
| name: '李四', | ||
| province: '上海', | ||
| city: '上海', | ||
| address: '测试大街2350号', | ||
| zip: '200000', | ||
| }, | ||
| { | ||
| date: '2016-05-04', | ||
| name: '王五', | ||
| province: '山东', | ||
| city: '青岛', | ||
| address: '产品大街0875号', | ||
| zip: '266000', | ||
| }, | ||
| { | ||
| date: '2016-05-01', | ||
| name: '刘六', | ||
| province: '山东', | ||
| city: '济南', | ||
| address: '幸福大街4590号', | ||
| zip: '250000', | ||
| }, | ||
| { | ||
| date: '2016-05-08', | ||
| name: '张三', | ||
| province: '北京', | ||
| city: '北京', | ||
| address: '开发大街1350号', | ||
| zip: '100000', | ||
| }, | ||
| { | ||
| date: '2016-05-06', | ||
| name: '王五', | ||
| province: '山东', | ||
| city: '青岛', | ||
| address: '产品大街0875号', | ||
| zip: '266000', | ||
| }, | ||
| { | ||
| date: '2016-05-07', | ||
| name: '王五', | ||
| province: '山东', | ||
| city: '青岛', | ||
| address: '产品大街0875号', | ||
| zip: '266000', | ||
| }, | ||
| ]); | ||
| }, | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import request from '@/utils/request'; | ||
|
|
||
| const enum Api { | ||
| LIST = '/api/table/list/', | ||
| } | ||
| export type ListResult = { | ||
| date: string; | ||
| name: string; | ||
| province: string; | ||
| city: string; | ||
| address: string; | ||
| zip: string; | ||
| }[]; | ||
| export function listApi() { | ||
| return request<ListResult>( | ||
| () => ({ | ||
| url: Api.LIST, | ||
| method: 'get', | ||
| }), | ||
| { noLoading: true }, | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,63 +1,92 @@ | ||
| import { debounce } from 'lodash-es'; | ||
| import { VNode, Component, watch, reactive, shallowRef, ref, withCtx, renderSlot } from 'vue'; | ||
| import { VNode, Component, watch, reactive, ref } from 'vue'; | ||
| import { useGlobalStore } from '@/store'; | ||
| const { i18n } = useGlobalStore(); | ||
| interface Label { | ||
| value: string; | ||
| label?: string; | ||
| children: Label[]; | ||
| } | ||
| const defaultMap = new Map<string, () => VNode[]>(); | ||
| const origionDefault = new Map<string, () => VNode[]>(); | ||
| /* 用于判断 vnode 是否是 el-table-column 组件 */ | ||
| function isElTableColumn(vnode: VNode) { | ||
| return (vnode.type as Component)?.name === 'ElTableColumn'; | ||
| } | ||
| export default (slot: () => VNode[]) => { | ||
| const labels = [] as Label[]; | ||
| const labels = reactive([]) as Label[]; | ||
| let needScreen = false; | ||
| const checkedLabels = reactive(new Set<string>()); | ||
| const key = ref(Symbol()); | ||
| const children = shallowRef(); | ||
| const checkedLabelsRaw = new Set<string>(); | ||
| let changeLabel = false; | ||
| const getVNodes = (vNodes: VNode[], labels: Label[], parentId = '') => { | ||
| const components = [] as VNode[]; | ||
| vNodes.forEach((vNode, index) => { | ||
| if (!isElTableColumn(vNode)) { | ||
| components.push(vNode); | ||
| return; | ||
| } | ||
| if (changeLabel) { | ||
| const label = labels.find((item) => item.value === parentId + '_' + index)!; | ||
| label.label = vNode.props?.label; | ||
| origionDefault.has(parentId + '_' + index) && | ||
| getVNodes(origionDefault.get(parentId + '_' + index)!(), label.children, parentId + '_' + index); | ||
| return; | ||
| } | ||
| //checkedLabelsRaw不能是动态reactive，否则属性值变换时会触发default渲染造成抖动 | ||
| if (needScreen) { | ||
| if (!checkedLabels.has(parentId + '_' + index)) { | ||
| if (!checkedLabelsRaw.has(parentId + '_' + index)) { | ||
| return; | ||
| } | ||
| } else { | ||
| if (isElTableColumn(vNode)) { | ||
| labels.push({ | ||
| value: parentId + '_' + index, | ||
| label: vNode.props?.label, | ||
| children: [], | ||
| }); | ||
| } | ||
| checkedLabels.add(parentId + '_' + index); | ||
| labels.push({ | ||
| value: parentId + '_' + index, | ||
| label: vNode.props?.label, | ||
| children: [], | ||
| }); | ||
| checkedLabelsRaw.add(parentId + '_' + index); | ||
| } | ||
| if (vNode.children && (vNode.children as Record<string, () => VNode[]>).default) { | ||
| if (!needScreen) { | ||
| defaultMap.set(parentId + '_' + index, (vNode.children as Record<string, () => VNode[]>)?.default); | ||
| origionDefault.set(parentId + '_' + index, (vNode.children as Record<string, () => VNode[]>)?.default); | ||
| getVNodes( | ||
| defaultMap.get(parentId + '_' + index)!(), | ||
| origionDefault.get(parentId + '_' + index)!(), | ||
| labels[labels.length - 1].children, | ||
| parentId + '_' + index, | ||
| ); | ||
| } | ||
| const children = computed(() => defaultMap.get(parentId + '_' + index)!()); | ||
| (vNode.children as Record<string, () => VNode[]>).default = () => { | ||
| return getVNodes(children.value, labels[labels.length - 1].children, parentId + '_' + index)(); | ||
| }; | ||
| //必须使用函数方式包含 origion default 否则动态渲染会失效 | ||
| (vNode.children as Record<string, () => VNode[]>).default = () => | ||
| getVNodes(origionDefault.get(parentId + '_' + index)!(), [], parentId + '_' + index)(); | ||
| } | ||
| components.push(vNode); | ||
| }); | ||
| return () => components; | ||
| }; | ||
| children.value = getVNodes(slot(), labels); | ||
| watch( | ||
| const children = ref(() => getVNodes(slot(), labels)()); | ||
| children.value(); //初始化 | ||
| needScreen = true; | ||
| const checkedLabels = reactive(checkedLabelsRaw); | ||
| const localeWacth = watch( | ||
| //语言变更时更新label | ||
| i18n.locale, | ||
| () => { | ||
| changeLabel = true; | ||
| getVNodes(slot(), labels); | ||
| changeLabel = false; | ||
| }, | ||
| ); | ||
| const checkedLabelsWatch = watch( | ||
| checkedLabels, | ||
| debounce(() => { | ||
| needScreen = true; | ||
| key.value = Symbol(); | ||
| children.value = () => getVNodes(slot(), labels)(); | ||
| }, 500), | ||
| ); | ||
| return { children, key, labels, checkedLabels }; | ||
| return { | ||
| children, | ||
| labels, | ||
| checkedLabels, | ||
| clean: (() => { | ||
| localeWacth(); | ||
| checkedLabelsWatch; | ||
| }) as (() => void) | undefined, | ||
| }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "自定义列": "Custom Columns", | ||
| "导出": "Export", | ||
| "打印": "Print", | ||
| "快捷搜索": "Quick Search", | ||
| "更多筛选": "Filter By" | ||
| } |
Oops, something went wrong.