增加admin管理帐号和项目的界面--初步实现
This commit is contained in:
Cheng Zhou
Generated
Vendored
+223
@@ -0,0 +1,223 @@
|
||||
import type { ComponentInternalInstance, PropType, Ref, VNode } from 'vue';
|
||||
import type { DefaultRow, Table, TableSortOrder } from '../table/defaults';
|
||||
import type { TableOverflowTooltipFormatter, TableOverflowTooltipOptions } from '../util';
|
||||
import type { Store } from '../store';
|
||||
type CI<T extends DefaultRow> = {
|
||||
column: TableColumnCtx<T>;
|
||||
$index: number;
|
||||
store: Store<T>;
|
||||
_self: any;
|
||||
};
|
||||
type Filters = {
|
||||
text: string;
|
||||
value: string;
|
||||
}[];
|
||||
type FilterMethods<T extends DefaultRow> = (value: string, row: T, column: TableColumnCtx<T>) => void;
|
||||
type ValueOf<T> = T[keyof T];
|
||||
type TableColumnCtx<T extends DefaultRow = DefaultRow> = {
|
||||
id: string;
|
||||
realWidth: number | null;
|
||||
type: string;
|
||||
label: string;
|
||||
className: string;
|
||||
labelClassName: string;
|
||||
property: string;
|
||||
prop: string;
|
||||
width?: string | number;
|
||||
minWidth: string | number;
|
||||
renderHeader: (data: CI<T>) => VNode;
|
||||
sortable: boolean | string;
|
||||
sortMethod: (a: T, b: T) => number;
|
||||
sortBy: string | ((row: T, index: number, array?: T[]) => string) | string[];
|
||||
resizable: boolean;
|
||||
columnKey: string;
|
||||
rawColumnKey: string;
|
||||
align: string;
|
||||
headerAlign: string;
|
||||
showOverflowTooltip?: boolean | TableOverflowTooltipOptions;
|
||||
tooltipFormatter?: TableOverflowTooltipFormatter<T>;
|
||||
fixed: boolean | string;
|
||||
formatter: (row: T, column: TableColumnCtx<T>, cellValue: any, index: number) => VNode | string;
|
||||
selectable: (row: T, index: number) => boolean;
|
||||
reserveSelection: boolean;
|
||||
filterMethod: FilterMethods<T>;
|
||||
filteredValue: string[];
|
||||
filters: Filters;
|
||||
filterPlacement: string;
|
||||
filterMultiple: boolean;
|
||||
filterClassName: string;
|
||||
index: number | ((index: number) => number);
|
||||
sortOrders: (TableSortOrder | null)[];
|
||||
renderCell: (data: any) => VNode | VNode[];
|
||||
colSpan: number;
|
||||
rowSpan: number;
|
||||
children?: TableColumnCtx<T>[];
|
||||
level: number;
|
||||
filterable: boolean | FilterMethods<T> | Filters;
|
||||
order: TableSortOrder | null;
|
||||
isColumnGroup: boolean;
|
||||
isSubColumn: boolean;
|
||||
columns: TableColumnCtx<T>[];
|
||||
getColumnIndex: () => number;
|
||||
no: number;
|
||||
filterOpened?: boolean;
|
||||
renderFilterIcon?: (scope: any) => VNode;
|
||||
renderExpand?: (scope: any) => VNode;
|
||||
};
|
||||
interface TableColumn<T extends DefaultRow> extends ComponentInternalInstance {
|
||||
vnode: {
|
||||
vParent: TableColumn<T> | Table<T>;
|
||||
} & VNode;
|
||||
vParent: TableColumn<T> | Table<T>;
|
||||
columnId: string;
|
||||
columnConfig: Ref<Partial<TableColumnCtx<T>>>;
|
||||
}
|
||||
export type { Filters, FilterMethods, TableColumnCtx, TableColumn, ValueOf };
|
||||
declare const _default: {
|
||||
/**
|
||||
* @description type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon
|
||||
*/
|
||||
type: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* @description column label
|
||||
*/
|
||||
label: StringConstructor;
|
||||
/**
|
||||
* @description class name of cells in the column
|
||||
*/
|
||||
className: StringConstructor;
|
||||
/**
|
||||
* @description class name of the label of this column
|
||||
*/
|
||||
labelClassName: StringConstructor;
|
||||
/**
|
||||
* @description
|
||||
*/
|
||||
property: StringConstructor;
|
||||
/**
|
||||
* @description field name. You can also use its alias: `property`
|
||||
*/
|
||||
prop: StringConstructor;
|
||||
/**
|
||||
* @description column width
|
||||
*/
|
||||
width: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* @description column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion
|
||||
*/
|
||||
minWidth: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* @description render function for table header of this column
|
||||
*/
|
||||
renderHeader: PropType<TableColumnCtx<any>["renderHeader"]>;
|
||||
/**
|
||||
* @description whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table
|
||||
*/
|
||||
sortable: {
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
default: boolean;
|
||||
};
|
||||
/**
|
||||
* @description sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort
|
||||
*/
|
||||
sortMethod: PropType<TableColumnCtx<any>["sortMethod"]>;
|
||||
/**
|
||||
* @description specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal
|
||||
*/
|
||||
sortBy: PropType<TableColumnCtx<any>["sortBy"]>;
|
||||
/**
|
||||
* @description whether column width can be resized, works when `border` of `el-table` is `true`
|
||||
*/
|
||||
resizable: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
/**
|
||||
* @description column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered
|
||||
*/
|
||||
columnKey: StringConstructor;
|
||||
/**
|
||||
* @description alignment, the value should be 'left' \/ 'center' \/ 'right'
|
||||
*/
|
||||
align: StringConstructor;
|
||||
/**
|
||||
* @description alignment of the table header. If omitted, the value of the above `align` attribute will be applied, the value should be 'left' \/ 'center' \/ 'right'
|
||||
*/
|
||||
headerAlign: StringConstructor;
|
||||
/**
|
||||
* @description whether to hide extra content and show them in a tooltip when hovering on the cell
|
||||
*/
|
||||
showOverflowTooltip: {
|
||||
type: PropType<TableColumnCtx<any>["showOverflowTooltip"]>;
|
||||
default: undefined;
|
||||
};
|
||||
/**
|
||||
* @description function that formats cell tooltip content, works when `show-overflow-tooltip` is `true`
|
||||
*/
|
||||
tooltipFormatter: PropType<TableColumnCtx<any>["tooltipFormatter"]>;
|
||||
/**
|
||||
* @description whether column is fixed at left / right. Will be fixed at left if `true`
|
||||
*/
|
||||
fixed: (BooleanConstructor | StringConstructor)[];
|
||||
/**
|
||||
* @description function that formats cell content
|
||||
*/
|
||||
formatter: PropType<TableColumnCtx<any>["formatter"]>;
|
||||
/**
|
||||
* @description function that determines if a certain row can be selected, works when `type` is 'selection'
|
||||
*/
|
||||
selectable: PropType<TableColumnCtx<any>["selectable"]>;
|
||||
/**
|
||||
* @description whether to reserve selection after data refreshing, works when `type` is 'selection'. Note that `row-key` is required for this to work
|
||||
*/
|
||||
reserveSelection: BooleanConstructor;
|
||||
/**
|
||||
* @description data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true`
|
||||
*/
|
||||
filterMethod: PropType<TableColumnCtx<any>["filterMethod"]>;
|
||||
/**
|
||||
* @description filter value for selected data, might be useful when table header is rendered with `render-header`
|
||||
*/
|
||||
filteredValue: PropType<TableColumnCtx<any>["filteredValue"]>;
|
||||
/**
|
||||
* @description an array of data filtering options. For each element in this array, `text` and `value` are required
|
||||
*/
|
||||
filters: PropType<TableColumnCtx<any>["filters"]>;
|
||||
/**
|
||||
* @description placement for the filter dropdown
|
||||
*/
|
||||
filterPlacement: StringConstructor;
|
||||
/**
|
||||
* @description whether data filtering supports multiple options
|
||||
*/
|
||||
filterMultiple: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
/**
|
||||
* @description className for the filter dropdown
|
||||
*/
|
||||
filterClassName: StringConstructor;
|
||||
/**
|
||||
* @description customize indices for each row, works on columns with `type=index`
|
||||
*/
|
||||
index: PropType<TableColumnCtx<any>["index"]>;
|
||||
/**
|
||||
* @description the order of the sorting strategies used when sorting the data, works when `sortable` is `true`. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array
|
||||
*/
|
||||
sortOrders: {
|
||||
type: PropType<TableColumnCtx<any>["sortOrders"]>;
|
||||
default: () => (string | null)[];
|
||||
validator: (val: TableColumnCtx<any>["sortOrders"]) => boolean;
|
||||
};
|
||||
};
|
||||
export default _default;
|
||||
Generated
Vendored
+64
@@ -0,0 +1,64 @@
|
||||
var defaultProps = {
|
||||
type: {
|
||||
type: String,
|
||||
default: "default"
|
||||
},
|
||||
label: String,
|
||||
className: String,
|
||||
labelClassName: String,
|
||||
property: String,
|
||||
prop: String,
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
},
|
||||
minWidth: {
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
},
|
||||
renderHeader: Function,
|
||||
sortable: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
sortMethod: Function,
|
||||
sortBy: [String, Function, Array],
|
||||
resizable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
columnKey: String,
|
||||
align: String,
|
||||
headerAlign: String,
|
||||
showOverflowTooltip: {
|
||||
type: [Boolean, Object],
|
||||
default: void 0
|
||||
},
|
||||
tooltipFormatter: Function,
|
||||
fixed: [Boolean, String],
|
||||
formatter: Function,
|
||||
selectable: Function,
|
||||
reserveSelection: Boolean,
|
||||
filterMethod: Function,
|
||||
filteredValue: Array,
|
||||
filters: Array,
|
||||
filterPlacement: String,
|
||||
filterMultiple: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
filterClassName: String,
|
||||
index: [Number, Function],
|
||||
sortOrders: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return ["ascending", "descending", null];
|
||||
},
|
||||
validator: (val) => {
|
||||
return val.every((order) => ["ascending", "descending", null].includes(order));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export { defaultProps as default };
|
||||
//# sourceMappingURL=defaults.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+125
@@ -0,0 +1,125 @@
|
||||
import type { TableColumnCtx } from './defaults';
|
||||
declare const _default: import("vue").DefineComponent<{
|
||||
type: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
label: StringConstructor;
|
||||
className: StringConstructor;
|
||||
labelClassName: StringConstructor;
|
||||
property: StringConstructor;
|
||||
prop: StringConstructor;
|
||||
width: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
minWidth: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
renderHeader: import("vue").PropType<TableColumnCtx<any>["renderHeader"]>;
|
||||
sortable: {
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
default: boolean;
|
||||
};
|
||||
sortMethod: import("vue").PropType<TableColumnCtx<any>["sortMethod"]>;
|
||||
sortBy: import("vue").PropType<TableColumnCtx<any>["sortBy"]>;
|
||||
resizable: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
columnKey: StringConstructor;
|
||||
align: StringConstructor;
|
||||
headerAlign: StringConstructor;
|
||||
showOverflowTooltip: {
|
||||
type: import("vue").PropType<TableColumnCtx<any>["showOverflowTooltip"]>;
|
||||
default: undefined;
|
||||
};
|
||||
tooltipFormatter: import("vue").PropType<TableColumnCtx<any>["tooltipFormatter"]>;
|
||||
fixed: (BooleanConstructor | StringConstructor)[];
|
||||
formatter: import("vue").PropType<TableColumnCtx<any>["formatter"]>;
|
||||
selectable: import("vue").PropType<TableColumnCtx<any>["selectable"]>;
|
||||
reserveSelection: BooleanConstructor;
|
||||
filterMethod: import("vue").PropType<TableColumnCtx<any>["filterMethod"]>;
|
||||
filteredValue: import("vue").PropType<TableColumnCtx<any>["filteredValue"]>;
|
||||
filters: import("vue").PropType<TableColumnCtx<any>["filters"]>;
|
||||
filterPlacement: StringConstructor;
|
||||
filterMultiple: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
filterClassName: StringConstructor;
|
||||
index: import("vue").PropType<TableColumnCtx<any>["index"]>;
|
||||
sortOrders: {
|
||||
type: import("vue").PropType<TableColumnCtx<any>["sortOrders"]>;
|
||||
default: () => (string | null)[];
|
||||
validator: (val: TableColumnCtx<any>["sortOrders"]) => boolean;
|
||||
};
|
||||
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
type: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
label: StringConstructor;
|
||||
className: StringConstructor;
|
||||
labelClassName: StringConstructor;
|
||||
property: StringConstructor;
|
||||
prop: StringConstructor;
|
||||
width: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
minWidth: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
renderHeader: import("vue").PropType<TableColumnCtx<any>["renderHeader"]>;
|
||||
sortable: {
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
default: boolean;
|
||||
};
|
||||
sortMethod: import("vue").PropType<TableColumnCtx<any>["sortMethod"]>;
|
||||
sortBy: import("vue").PropType<TableColumnCtx<any>["sortBy"]>;
|
||||
resizable: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
columnKey: StringConstructor;
|
||||
align: StringConstructor;
|
||||
headerAlign: StringConstructor;
|
||||
showOverflowTooltip: {
|
||||
type: import("vue").PropType<TableColumnCtx<any>["showOverflowTooltip"]>;
|
||||
default: undefined;
|
||||
};
|
||||
tooltipFormatter: import("vue").PropType<TableColumnCtx<any>["tooltipFormatter"]>;
|
||||
fixed: (BooleanConstructor | StringConstructor)[];
|
||||
formatter: import("vue").PropType<TableColumnCtx<any>["formatter"]>;
|
||||
selectable: import("vue").PropType<TableColumnCtx<any>["selectable"]>;
|
||||
reserveSelection: BooleanConstructor;
|
||||
filterMethod: import("vue").PropType<TableColumnCtx<any>["filterMethod"]>;
|
||||
filteredValue: import("vue").PropType<TableColumnCtx<any>["filteredValue"]>;
|
||||
filters: import("vue").PropType<TableColumnCtx<any>["filters"]>;
|
||||
filterPlacement: StringConstructor;
|
||||
filterMultiple: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
filterClassName: StringConstructor;
|
||||
index: import("vue").PropType<TableColumnCtx<any>["index"]>;
|
||||
sortOrders: {
|
||||
type: import("vue").PropType<TableColumnCtx<any>["sortOrders"]>;
|
||||
default: () => (string | null)[];
|
||||
validator: (val: TableColumnCtx<any>["sortOrders"]) => boolean;
|
||||
};
|
||||
}>>, {
|
||||
width: string | number;
|
||||
minWidth: string | number;
|
||||
type: string;
|
||||
resizable: boolean;
|
||||
showOverflowTooltip: boolean | Partial<Pick<import("element-plus").ElTooltipProps, "offset" | "transition" | "placement" | "effect" | "showAfter" | "hideAfter" | "popperOptions" | "enterable" | "popperClass" | "appendTo" | "showArrow">> | undefined;
|
||||
sortOrders: (import("../table/defaults").TableSortOrder | null)[];
|
||||
sortable: string | boolean;
|
||||
reserveSelection: boolean;
|
||||
filterMultiple: boolean;
|
||||
}>;
|
||||
export default _default;
|
||||
Generated
Vendored
+149
@@ -0,0 +1,149 @@
|
||||
import { defineComponent, getCurrentInstance, ref, computed, onBeforeMount, onMounted, onBeforeUnmount, Fragment, h } from 'vue';
|
||||
import { ElCheckbox } from '../../../checkbox/index.mjs';
|
||||
import { cellStarts } from '../config.mjs';
|
||||
import { mergeOptions, compose } from '../util.mjs';
|
||||
import useWatcher from './watcher-helper.mjs';
|
||||
import useRender from './render-helper.mjs';
|
||||
import defaultProps from './defaults.mjs';
|
||||
import { isUndefined } from '../../../../utils/types.mjs';
|
||||
import { isArray, isString } from '@vue/shared';
|
||||
|
||||
let columnIdSeed = 1;
|
||||
var ElTableColumn = defineComponent({
|
||||
name: "ElTableColumn",
|
||||
components: {
|
||||
ElCheckbox
|
||||
},
|
||||
props: defaultProps,
|
||||
setup(props, { slots }) {
|
||||
const instance = getCurrentInstance();
|
||||
const columnConfig = ref({});
|
||||
const owner = computed(() => {
|
||||
let parent2 = instance.parent;
|
||||
while (parent2 && !parent2.tableId) {
|
||||
parent2 = parent2.parent;
|
||||
}
|
||||
return parent2;
|
||||
});
|
||||
const { registerNormalWatchers, registerComplexWatchers } = useWatcher(owner, props);
|
||||
const {
|
||||
columnId,
|
||||
isSubColumn,
|
||||
realHeaderAlign,
|
||||
columnOrTableParent,
|
||||
setColumnWidth,
|
||||
setColumnForcedProps,
|
||||
setColumnRenders,
|
||||
getPropsData,
|
||||
getColumnElIndex,
|
||||
realAlign,
|
||||
updateColumnOrder
|
||||
} = useRender(props, slots, owner);
|
||||
const parent = columnOrTableParent.value;
|
||||
columnId.value = `${"tableId" in parent && parent.tableId || "columnId" in parent && parent.columnId}_column_${columnIdSeed++}`;
|
||||
onBeforeMount(() => {
|
||||
isSubColumn.value = owner.value !== parent;
|
||||
const type = props.type || "default";
|
||||
const sortable = props.sortable === "" ? true : props.sortable;
|
||||
const showOverflowTooltip = type === "selection" ? false : isUndefined(props.showOverflowTooltip) ? parent.props.showOverflowTooltip : props.showOverflowTooltip;
|
||||
const tooltipFormatter = isUndefined(props.tooltipFormatter) ? parent.props.tooltipFormatter : props.tooltipFormatter;
|
||||
const defaults = {
|
||||
...cellStarts[type],
|
||||
id: columnId.value,
|
||||
type,
|
||||
property: props.prop || props.property,
|
||||
align: realAlign,
|
||||
headerAlign: realHeaderAlign,
|
||||
showOverflowTooltip,
|
||||
tooltipFormatter,
|
||||
filterable: props.filters || props.filterMethod,
|
||||
filteredValue: [],
|
||||
filterPlacement: "",
|
||||
filterClassName: "",
|
||||
isColumnGroup: false,
|
||||
isSubColumn: false,
|
||||
filterOpened: false,
|
||||
sortable,
|
||||
index: props.index,
|
||||
rawColumnKey: instance.vnode.key
|
||||
};
|
||||
const basicProps = [
|
||||
"columnKey",
|
||||
"label",
|
||||
"className",
|
||||
"labelClassName",
|
||||
"type",
|
||||
"renderHeader",
|
||||
"formatter",
|
||||
"fixed",
|
||||
"resizable"
|
||||
];
|
||||
const sortProps = ["sortMethod", "sortBy", "sortOrders"];
|
||||
const selectProps = ["selectable", "reserveSelection"];
|
||||
const filterProps = [
|
||||
"filterMethod",
|
||||
"filters",
|
||||
"filterMultiple",
|
||||
"filterOpened",
|
||||
"filteredValue",
|
||||
"filterPlacement",
|
||||
"filterClassName"
|
||||
];
|
||||
let column = getPropsData(basicProps, sortProps, selectProps, filterProps);
|
||||
column = mergeOptions(defaults, column);
|
||||
const chains = compose(setColumnRenders, setColumnWidth, setColumnForcedProps);
|
||||
column = chains(column);
|
||||
columnConfig.value = column;
|
||||
registerNormalWatchers();
|
||||
registerComplexWatchers();
|
||||
});
|
||||
onMounted(() => {
|
||||
var _a, _b;
|
||||
const parent2 = columnOrTableParent.value;
|
||||
const children = isSubColumn.value ? (_a = parent2.vnode.el) == null ? void 0 : _a.children : (_b = parent2.refs.hiddenColumns) == null ? void 0 : _b.children;
|
||||
const getColumnIndex = () => getColumnElIndex(children || [], instance.vnode.el);
|
||||
columnConfig.value.getColumnIndex = getColumnIndex;
|
||||
const columnIndex = getColumnIndex();
|
||||
columnIndex > -1 && owner.value.store.commit("insertColumn", columnConfig.value, isSubColumn.value ? "columnConfig" in parent2 && parent2.columnConfig.value : null, updateColumnOrder);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
const getColumnIndex = columnConfig.value.getColumnIndex;
|
||||
const columnIndex = getColumnIndex ? getColumnIndex() : -1;
|
||||
columnIndex > -1 && owner.value.store.commit("removeColumn", columnConfig.value, isSubColumn.value ? "columnConfig" in parent && parent.columnConfig.value : null, updateColumnOrder);
|
||||
});
|
||||
instance.columnId = columnId.value;
|
||||
instance.columnConfig = columnConfig;
|
||||
return;
|
||||
},
|
||||
render() {
|
||||
var _a, _b, _c;
|
||||
try {
|
||||
const renderDefault = (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a, {
|
||||
row: {},
|
||||
column: {},
|
||||
$index: -1
|
||||
});
|
||||
const children = [];
|
||||
if (isArray(renderDefault)) {
|
||||
for (const childNode of renderDefault) {
|
||||
if (((_c = childNode.type) == null ? void 0 : _c.name) === "ElTableColumn" || childNode.shapeFlag & 2) {
|
||||
children.push(childNode);
|
||||
} else if (childNode.type === Fragment && isArray(childNode.children)) {
|
||||
childNode.children.forEach((vnode2) => {
|
||||
if ((vnode2 == null ? void 0 : vnode2.patchFlag) !== 1024 && !isString(vnode2 == null ? void 0 : vnode2.children)) {
|
||||
children.push(vnode2);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
const vnode = h("div", children);
|
||||
return vnode;
|
||||
} catch (e) {
|
||||
return h("div", []);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export { ElTableColumn as default };
|
||||
//# sourceMappingURL=index.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+17
@@ -0,0 +1,17 @@
|
||||
import type { ComputedRef, RendererNode, Slots } from 'vue';
|
||||
import type { TableColumn, TableColumnCtx } from './defaults';
|
||||
import type { DefaultRow, Table } from '../table/defaults';
|
||||
declare function useRender<T extends DefaultRow>(props: TableColumnCtx<T>, slots: Slots, owner: ComputedRef<Table<T>>): {
|
||||
columnId: import("vue").Ref<string>;
|
||||
realAlign: import("vue").Ref<string | null | undefined>;
|
||||
isSubColumn: import("vue").Ref<boolean>;
|
||||
realHeaderAlign: import("vue").Ref<string | null | undefined>;
|
||||
columnOrTableParent: ComputedRef<Table<T> | TableColumn<T>>;
|
||||
setColumnWidth: (column: TableColumnCtx<T>) => TableColumnCtx<T>;
|
||||
setColumnForcedProps: (column: TableColumnCtx<T>) => TableColumnCtx<T>;
|
||||
setColumnRenders: (column: TableColumnCtx<T>) => TableColumnCtx<T>;
|
||||
getPropsData: (...propsKey: string[][]) => Record<string, any>;
|
||||
getColumnElIndex: (children: T[], child: RendererNode | null) => number;
|
||||
updateColumnOrder: () => void;
|
||||
};
|
||||
export default useRender;
|
||||
Generated
Vendored
+180
@@ -0,0 +1,180 @@
|
||||
import { getCurrentInstance, ref, watchEffect, computed, unref, h, Fragment, createTextVNode, renderSlot, Comment } from 'vue';
|
||||
import { cellForced, defaultRenderCell, treeCellPrefix, getDefaultClassName } from '../config.mjs';
|
||||
import { parseWidth, parseMinWidth, ensureValidVNode } from '../util.mjs';
|
||||
import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
|
||||
import { isUndefined } from '../../../../utils/types.mjs';
|
||||
import { debugWarn } from '../../../../utils/error.mjs';
|
||||
import { isArray } from '@vue/shared';
|
||||
|
||||
function useRender(props, slots, owner) {
|
||||
const instance = getCurrentInstance();
|
||||
const columnId = ref("");
|
||||
const isSubColumn = ref(false);
|
||||
const realAlign = ref();
|
||||
const realHeaderAlign = ref();
|
||||
const ns = useNamespace("table");
|
||||
watchEffect(() => {
|
||||
realAlign.value = props.align ? `is-${props.align}` : null;
|
||||
realAlign.value;
|
||||
});
|
||||
watchEffect(() => {
|
||||
realHeaderAlign.value = props.headerAlign ? `is-${props.headerAlign}` : realAlign.value;
|
||||
realHeaderAlign.value;
|
||||
});
|
||||
const columnOrTableParent = computed(() => {
|
||||
let parent = instance.vnode.vParent || instance.parent;
|
||||
while (parent && !parent.tableId && !parent.columnId) {
|
||||
parent = parent.vnode.vParent || parent.parent;
|
||||
}
|
||||
return parent;
|
||||
});
|
||||
const hasTreeColumn = computed(() => {
|
||||
const { store } = instance.parent;
|
||||
if (!store)
|
||||
return false;
|
||||
const { treeData } = store.states;
|
||||
const treeDataValue = treeData.value;
|
||||
return treeDataValue && Object.keys(treeDataValue).length > 0;
|
||||
});
|
||||
const realWidth = ref(parseWidth(props.width));
|
||||
const realMinWidth = ref(parseMinWidth(props.minWidth));
|
||||
const setColumnWidth = (column) => {
|
||||
if (realWidth.value)
|
||||
column.width = realWidth.value;
|
||||
if (realMinWidth.value) {
|
||||
column.minWidth = realMinWidth.value;
|
||||
}
|
||||
if (!realWidth.value && realMinWidth.value) {
|
||||
column.width = void 0;
|
||||
}
|
||||
if (!column.minWidth) {
|
||||
column.minWidth = 80;
|
||||
}
|
||||
column.realWidth = Number(isUndefined(column.width) ? column.minWidth : column.width);
|
||||
return column;
|
||||
};
|
||||
const setColumnForcedProps = (column) => {
|
||||
const type = column.type;
|
||||
const source = cellForced[type] || {};
|
||||
Object.keys(source).forEach((prop) => {
|
||||
const value = source[prop];
|
||||
if (prop !== "className" && !isUndefined(value)) {
|
||||
column[prop] = value;
|
||||
}
|
||||
});
|
||||
const className = getDefaultClassName(type);
|
||||
if (className) {
|
||||
const forceClass = `${unref(ns.namespace)}-${className}`;
|
||||
column.className = column.className ? `${column.className} ${forceClass}` : forceClass;
|
||||
}
|
||||
return column;
|
||||
};
|
||||
const checkSubColumn = (children) => {
|
||||
if (isArray(children)) {
|
||||
children.forEach((child) => check(child));
|
||||
} else {
|
||||
check(children);
|
||||
}
|
||||
function check(item) {
|
||||
var _a;
|
||||
if (((_a = item == null ? void 0 : item.type) == null ? void 0 : _a.name) === "ElTableColumn") {
|
||||
item.vParent = instance;
|
||||
}
|
||||
}
|
||||
};
|
||||
const setColumnRenders = (column) => {
|
||||
if (props.renderHeader) {
|
||||
debugWarn("TableColumn", "Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.");
|
||||
} else if (column.type !== "selection") {
|
||||
column.renderHeader = (scope) => {
|
||||
instance.columnConfig.value["label"];
|
||||
if (slots.header) {
|
||||
const slotResult = slots.header(scope);
|
||||
if (ensureValidVNode(slotResult)) {
|
||||
return h(Fragment, slotResult);
|
||||
}
|
||||
}
|
||||
return createTextVNode(column.label);
|
||||
};
|
||||
}
|
||||
if (slots["filter-icon"]) {
|
||||
column.renderFilterIcon = (scope) => {
|
||||
return renderSlot(slots, "filter-icon", scope);
|
||||
};
|
||||
}
|
||||
if (slots.expand) {
|
||||
column.renderExpand = (scope) => {
|
||||
return renderSlot(slots, "expand", scope);
|
||||
};
|
||||
}
|
||||
let originRenderCell = column.renderCell;
|
||||
if (column.type === "expand") {
|
||||
column.renderCell = (data) => h("div", {
|
||||
class: "cell"
|
||||
}, [originRenderCell(data)]);
|
||||
owner.value.renderExpanded = (row) => {
|
||||
return slots.default ? slots.default(row) : slots.default;
|
||||
};
|
||||
} else {
|
||||
originRenderCell = originRenderCell || defaultRenderCell;
|
||||
column.renderCell = (data) => {
|
||||
let children = null;
|
||||
if (slots.default) {
|
||||
const vnodes = slots.default(data);
|
||||
children = vnodes.some((v) => v.type !== Comment) ? vnodes : originRenderCell(data);
|
||||
} else {
|
||||
children = originRenderCell(data);
|
||||
}
|
||||
const { columns } = owner.value.store.states;
|
||||
const firstUserColumnIndex = columns.value.findIndex((item) => item.type === "default");
|
||||
const shouldCreatePlaceholder = hasTreeColumn.value && data.cellIndex === firstUserColumnIndex;
|
||||
const prefix = treeCellPrefix(data, shouldCreatePlaceholder);
|
||||
const props2 = {
|
||||
class: "cell",
|
||||
style: {}
|
||||
};
|
||||
if (column.showOverflowTooltip) {
|
||||
props2.class = `${props2.class} ${unref(ns.namespace)}-tooltip`;
|
||||
props2.style = {
|
||||
width: `${(data.column.realWidth || Number(data.column.width)) - 1}px`
|
||||
};
|
||||
}
|
||||
checkSubColumn(children);
|
||||
return h("div", props2, [prefix, children]);
|
||||
};
|
||||
}
|
||||
return column;
|
||||
};
|
||||
const getPropsData = (...propsKey) => {
|
||||
return propsKey.reduce((prev, cur) => {
|
||||
if (isArray(cur)) {
|
||||
cur.forEach((key) => {
|
||||
prev[key] = props[key];
|
||||
});
|
||||
}
|
||||
return prev;
|
||||
}, {});
|
||||
};
|
||||
const getColumnElIndex = (children, child) => {
|
||||
return Array.prototype.indexOf.call(children, child);
|
||||
};
|
||||
const updateColumnOrder = () => {
|
||||
owner.value.store.commit("updateColumnOrder", instance.columnConfig.value);
|
||||
};
|
||||
return {
|
||||
columnId,
|
||||
realAlign,
|
||||
isSubColumn,
|
||||
realHeaderAlign,
|
||||
columnOrTableParent,
|
||||
setColumnWidth,
|
||||
setColumnForcedProps,
|
||||
setColumnRenders,
|
||||
getPropsData,
|
||||
getColumnElIndex,
|
||||
updateColumnOrder
|
||||
};
|
||||
}
|
||||
|
||||
export { useRender as default };
|
||||
//# sourceMappingURL=render-helper.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+8
@@ -0,0 +1,8 @@
|
||||
import type { ComputedRef } from 'vue';
|
||||
import type { DefaultRow } from '../table/defaults';
|
||||
import type { TableColumnCtx } from './defaults';
|
||||
declare function useWatcher<T extends DefaultRow>(owner: ComputedRef<any>, props_: Partial<TableColumnCtx<T>>): {
|
||||
registerComplexWatchers: () => void;
|
||||
registerNormalWatchers: () => void;
|
||||
};
|
||||
export default useWatcher;
|
||||
Generated
Vendored
+88
@@ -0,0 +1,88 @@
|
||||
import { getCurrentInstance, watch } from 'vue';
|
||||
import { parseWidth, parseMinWidth } from '../util.mjs';
|
||||
import { hasOwn } from '@vue/shared';
|
||||
|
||||
function getAllAliases(props, aliases) {
|
||||
return props.reduce((prev, cur) => {
|
||||
prev[cur] = cur;
|
||||
return prev;
|
||||
}, aliases);
|
||||
}
|
||||
function useWatcher(owner, props_) {
|
||||
const instance = getCurrentInstance();
|
||||
const registerComplexWatchers = () => {
|
||||
const props = ["fixed"];
|
||||
const aliases = {
|
||||
realWidth: "width",
|
||||
realMinWidth: "minWidth"
|
||||
};
|
||||
const allAliases = getAllAliases(props, aliases);
|
||||
Object.keys(allAliases).forEach((key) => {
|
||||
const columnKey = aliases[key];
|
||||
if (hasOwn(props_, columnKey)) {
|
||||
watch(() => props_[columnKey], (newVal) => {
|
||||
let value = newVal;
|
||||
if (columnKey === "width" && key === "realWidth") {
|
||||
value = parseWidth(newVal);
|
||||
}
|
||||
if (columnKey === "minWidth" && key === "realMinWidth") {
|
||||
value = parseMinWidth(newVal);
|
||||
}
|
||||
instance.columnConfig.value[columnKey] = value;
|
||||
instance.columnConfig.value[key] = value;
|
||||
const updateColumns = columnKey === "fixed";
|
||||
owner.value.store.scheduleLayout(updateColumns);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
const registerNormalWatchers = () => {
|
||||
const props = [
|
||||
"label",
|
||||
"filters",
|
||||
"filterMultiple",
|
||||
"filteredValue",
|
||||
"sortable",
|
||||
"index",
|
||||
"formatter",
|
||||
"className",
|
||||
"labelClassName",
|
||||
"filterClassName",
|
||||
"showOverflowTooltip",
|
||||
"tooltipFormatter",
|
||||
"resizable"
|
||||
];
|
||||
const parentProps = ["showOverflowTooltip"];
|
||||
const aliases = {
|
||||
property: "prop",
|
||||
align: "realAlign",
|
||||
headerAlign: "realHeaderAlign"
|
||||
};
|
||||
const allAliases = getAllAliases(props, aliases);
|
||||
Object.keys(allAliases).forEach((key) => {
|
||||
const columnKey = aliases[key];
|
||||
if (hasOwn(props_, columnKey)) {
|
||||
watch(() => props_[columnKey], (newVal) => {
|
||||
instance.columnConfig.value[key] = newVal;
|
||||
if (key === "filters" || key === "filterMethod") {
|
||||
instance.columnConfig.value["filterable"] = !!(instance.columnConfig.value["filters"] || instance.columnConfig.value["filterMethod"]);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
parentProps.forEach((key) => {
|
||||
if (hasOwn(owner.value.props, key)) {
|
||||
watch(() => owner.value.props[key], (newVal) => {
|
||||
instance.columnConfig.value[key] = newVal;
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
return {
|
||||
registerComplexWatchers,
|
||||
registerNormalWatchers
|
||||
};
|
||||
}
|
||||
|
||||
export { useWatcher as default };
|
||||
//# sourceMappingURL=watcher-helper.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user