vxe-pc-ui 4.14.26 → 4.14.28

package/dist/all.esm.js

@@ -80,11 +80,11 @@ function checkDynamic() {
     }
 }
 
-const version$1 = `ui v${"4.14.26"}`;
+const version$1 = `ui v${"4.14.28"}`;
 const warnLog = log.create('warn', version$1);
 const errLog = log.create('error', version$1);
 
-const version = "4.14.26";
+const version = "4.14.28";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -3778,7 +3778,7 @@ function createInternalData$d() {
         targetEl: null
     };
 }
-function createReactData$8() {
+function createReactData$9() {
     return {
         showBtn: false,
         backtopZindex: 0
@@ -3858,7 +3858,7 @@ var VxeBacktopComponent = defineVxeComponent({
         const refElem = ref();
         const { computeSize } = useSize(props);
         const internalData = createInternalData$d();
-        const reactData = reactive(createReactData$8());
+        const reactData = reactive(createReactData$9());
         const refMaps = {
             refElem
         };
@@ -4035,7 +4035,7 @@ var VxeBacktopComponent = defineVxeComponent({
         });
         onBeforeUnmount(() => {
             removeScrollEvent();
-            XEUtils.assign(reactData, createReactData$8());
+            XEUtils.assign(reactData, createReactData$9());
             XEUtils.assign(internalData, createInternalData$d());
         });
         $xeBacktop.renderVN = renderVN;
@@ -13299,7 +13299,7 @@ function createInternalData$a() {
     // leaveTime: null
     };
 }
-function createReactData$7() {
+function createReactData$8() {
     return {
         visible: false,
         activeOption: null,
@@ -13355,7 +13355,7 @@ var VxeContextMenuComponent = defineVxeComponent({
         const refElem = ref();
         const { computeSize } = useSize(props);
         const internalData = createInternalData$a();
-        const reactData = reactive(createReactData$7());
+        const reactData = reactive(createReactData$8());
         const refMaps = {
             refElem
         };
@@ -13910,7 +13910,7 @@ var VxeContextMenuComponent = defineVxeComponent({
             globalEvents.off($xeContextMenu, 'keydown');
             globalEvents.off($xeContextMenu, 'mousedown');
             globalEvents.off($xeContextMenu, 'blur');
-            XEUtils.assign(reactData, createReactData$7());
+            XEUtils.assign(reactData, createReactData$8());
             XEUtils.assign(internalData, createInternalData$a());
         });
         $xeContextMenu.renderVN = renderVN;
@@ -14423,6 +14423,7 @@ var VxeDatePanelComponent = defineVxeComponent({
             default: 'date'
         },
         className: String,
+        cellClassName: [String, Function],
         size: {
             type: String,
             default: () => getConfig$3().datePanel.size || getConfig$3().size
@@ -15638,7 +15639,7 @@ var VxeDatePanelComponent = defineVxeComponent({
             return labelVNs;
         };
         const renderDateDayTable = () => {
-            const { multiple } = props;
+            const { type, multiple, cellClassName } = props;
             const { datePanelType, datePanelValue } = reactData;
             const dateValue = computeDateValue.value;
             const dateHeaders = computeDateHeaders.value;
@@ -15683,7 +15684,7 @@ var VxeDatePanelComponent = defineVxeComponent({
                         }, rows.map((item) => {
                             const isSelected = multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
                             return h('div', {
-                                class: ['vxe-date-panel--view-item', {
+                                class: ['vxe-date-panel--view-item', cellClassName ? (XEUtils.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ''}` : `${cellClassName || ''}`) : '', {
                                         'is--prev': item.isPrev,
                                         'is--current': item.isCurrent,
                                         'is--now': item.isNow,
@@ -15711,7 +15712,7 @@ var VxeDatePanelComponent = defineVxeComponent({
             ];
         };
         const renderDateWeekTable = () => {
-            const { multiple } = props;
+            const { type, multiple, cellClassName } = props;
             const { datePanelType, datePanelValue } = reactData;
             const dateValue = computeDateValue.value;
             const weekHeaders = computeWeekHeaders.value;
@@ -15758,7 +15759,7 @@ var VxeDatePanelComponent = defineVxeComponent({
                             }
                         }, rows.map((item, rIndex) => {
                             return h('div', {
-                                class: ['vxe-date-panel--view-item', {
+                                class: ['vxe-date-panel--view-item', cellClassName ? (XEUtils.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ''}` : `${cellClassName || ''}`) : '', {
                                         'is--prev': item.isPrev,
                                         'is--current': item.isCurrent,
                                         'is--now': rIndex ? item.isNow : isNowWeek,
@@ -15786,7 +15787,7 @@ var VxeDatePanelComponent = defineVxeComponent({
             ];
         };
         const renderDateMonthTable = () => {
-            const { multiple } = props;
+            const { type, multiple, cellClassName } = props;
             const { datePanelType, datePanelValue } = reactData;
             const dateValue = computeDateValue.value;
             const monthDatas = computeMonthDatas.value;
@@ -15808,7 +15809,7 @@ var VxeDatePanelComponent = defineVxeComponent({
                         }, rows.map((item) => {
                             const isSelected = multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
                             return h('div', {
-                                class: ['vxe-date-panel--view-item', {
+                                class: ['vxe-date-panel--view-item', cellClassName ? (XEUtils.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ''}` : `${cellClassName || ''}`) : '', {
                                         'is--prev': item.isPrev,
                                         'is--current': item.isCurrent,
                                         'is--now': item.isNow,
@@ -15836,7 +15837,7 @@ var VxeDatePanelComponent = defineVxeComponent({
             ];
         };
         const renderDateQuarterTable = () => {
-            const { multiple } = props;
+            const { type, multiple, cellClassName } = props;
             const { datePanelType, datePanelValue } = reactData;
             const dateValue = computeDateValue.value;
             const quarterDatas = computeQuarterDatas.value;
@@ -15858,7 +15859,7 @@ var VxeDatePanelComponent = defineVxeComponent({
                         }, rows.map((item) => {
                             const isSelected = multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
                             return h('div', {
-                                class: ['vxe-date-panel--view-item', {
+                                class: ['vxe-date-panel--view-item', cellClassName ? (XEUtils.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ''}` : `${cellClassName || ''}`) : '', {
                                         'is--prev': item.isPrev,
                                         'is--current': item.isCurrent,
                                         'is--now': item.isNow,
@@ -15886,7 +15887,7 @@ var VxeDatePanelComponent = defineVxeComponent({
             ];
         };
         const renderDateYearTable = () => {
-            const { multiple } = props;
+            const { type, multiple, cellClassName } = props;
             const { datePanelType, datePanelValue } = reactData;
             const dateValue = computeDateValue.value;
             const yearDatas = computeYearDatas.value;
@@ -15908,7 +15909,7 @@ var VxeDatePanelComponent = defineVxeComponent({
                         }, rows.map((item) => {
                             const isSelected = multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
                             return h('div', {
-                                class: ['vxe-date-panel--view-item', {
+                                class: ['vxe-date-panel--view-item', cellClassName ? (XEUtils.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ''}` : `${cellClassName || ''}`) : '', {
                                         'is--prev': item.isPrev,
                                         'is--current': item.isCurrent,
                                         'is--now': item.isNow,
@@ -17652,6 +17653,19 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                 }
             }
         };
+        const panelCellClassName = ({ date }) => {
+            const startValue = reactData.startValue;
+            const endValue = reactData.endValue;
+            if (startValue && endValue) {
+                const currTime = date.getTime();
+                const startTime = XEUtils.toStringDate(startValue).getTime();
+                const endTime = XEUtils.toStringDate(endValue).getTime();
+                if (currTime >= startTime && currTime <= endTime) {
+                    return 'is--range-selected';
+                }
+            }
+            return '';
+        };
         const handleSelectClose = () => {
             const { autoClose } = props;
             const { startValue, endValue } = reactData;
@@ -18117,6 +18131,7 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                                             festivalMethod: props.festivalMethod,
                                             disabledMethod: props.disabledMethod,
                                             selectDay: props.selectDay,
+                                            cellClassName: panelCellClassName,
                                             onChange: startPanelChangeEvent
                                         }),
                                         h(VxeDatePanelComponent, {
@@ -18137,6 +18152,7 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                                             festivalMethod: props.festivalMethod,
                                             disabledMethod: props.disabledMethod,
                                             selectDay: props.selectDay,
+                                            cellClassName: panelCellClassName,
                                             onChange: endPanelChangeEvent
                                         })
                                     ]),
@@ -19675,26 +19691,182 @@ function renderItemContent($xeForm, item) {
     }, contentVNs);
 }
 
+const formItemProps = {
+    title: String,
+    field: String,
+    span: {
+        type: [String, Number],
+        default: null
+    },
+    align: {
+        type: String,
+        default: null
+    },
+    verticalAlign: {
+        type: String,
+        default: null
+    },
+    titleBackground: {
+        type: Boolean,
+        default: null
+    },
+    titleBold: {
+        type: Boolean,
+        default: null
+    },
+    titleAlign: {
+        type: String,
+        default: null
+    },
+    titleWidth: {
+        type: [String, Number],
+        default: null
+    },
+    titleColon: {
+        type: Boolean,
+        default: null
+    },
+    titleAsterisk: {
+        type: Boolean,
+        default: null
+    },
+    showTitle: {
+        type: Boolean,
+        default: true
+    },
+    vertical: {
+        type: Boolean,
+        default: null
+    },
+    padding: {
+        type: Boolean,
+        default: null
+    },
+    formatter: [String, Function],
+    className: [String, Function],
+    contentClassName: [String, Function],
+    contentStyle: [Object, Function],
+    titleClassName: [String, Function],
+    titleStyle: [Object, Function],
+    titleOverflow: {
+        type: [Boolean, String],
+        default: null
+    },
+    titlePrefix: Object,
+    titleSuffix: Object,
+    resetValue: { default: null },
+    visibleMethod: Function,
+    visible: {
+        type: Boolean,
+        default: null
+    },
+    showContent: {
+        type: Boolean,
+        default: null
+    },
+    folding: Boolean,
+    collapseNode: Boolean,
+    itemRender: Object,
+    rules: Array,
+    params: Object
+};
+var VxeFormItemComponent = defineVxeComponent({
+    name: 'VxeFormItem',
+    props: formItemProps,
+    setup(props, { slots }) {
+        const xID = XEUtils.uniqueId();
+        const refElem = ref();
+        const $xeForm = inject('$xeForm', {});
+        const $xeFormGroup = inject('$xeFormGroup', null);
+        const formItem = reactive(createItem($xeForm, props));
+        formItem.slots = slots;
+        const formItemInfo = { itemConfig: formItem };
+        provide('xeFormItemInfo', formItemInfo);
+        const renderItem = ($xeForm, item) => {
+            const formProps = $xeForm.props;
+            const $xeGrid = $xeForm.xeGrid;
+            const { data, readonly, disabled } = formProps;
+            const { visible, field, itemRender, contentStyle, showContent } = item;
+            const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null;
+            const itemStyle = compConf ? (compConf.formItemStyle || compConf.itemStyle) : null;
+            const itemContentStyle = compConf ? (compConf.formItemContentStyle || compConf.itemContentStyle) : null;
+            const params = { data, disabled, readonly, field, property: field, item, $form: $xeForm, $grid: $xeGrid };
+            if (visible === false) {
+                return renderEmptyElement($xeFormItem);
+            }
+            return h('div', {
+                ref: refElem,
+                key: item.id,
+                itemid: item.id,
+                class: getItemClass($xeForm, item),
+                style: XEUtils.isFunction(itemStyle) ? itemStyle(params) : itemStyle
+            }, [
+                renderTitle($xeForm, item),
+                showContent === false
+                    ? renderEmptyElement($xeFormItem)
+                    : h('div', {
+                        class: getItemContentClass($xeForm, item),
+                        style: Object.assign({}, XEUtils.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, XEUtils.isFunction(contentStyle) ? contentStyle(params) : contentStyle)
+                    }, [
+                        renderItemContent($xeForm, item),
+                        renderItemErrorIcon($xeForm, item)
+                    ])
+            ]);
+        };
+        const renderVN = () => {
+            const customLayout = $xeForm ? $xeForm.props.customLayout : false;
+            const item = formItem;
+            return customLayout
+                ? renderItem($xeForm, item)
+                : h('div', {
+                    ref: refElem
+                });
+        };
+        const $xeFormItem = {
+            xID,
+            formItem,
+            renderVN
+        };
+        watchItem(props, formItem);
+        onMounted(() => {
+            const elem = refElem.value;
+            assembleItem($xeForm, elem, formItem, $xeFormGroup);
+        });
+        onUnmounted(() => {
+            destroyItem($xeForm, formItem);
+        });
+        provide('$xeFormItem', $xeFormItem);
+        provide('$xeFormGroup', null);
+        return $xeFormItem;
+    },
+    render() {
+        return this.renderVN();
+    }
+});
+
 const VxeFormConfigItem = defineVxeComponent({
     name: 'VxeFormConfigItem',
-    props: {
-        itemConfig: Object
-    },
+    props: Object.assign({ itemConfig: Object }, formItemProps),
     setup(props) {
         const $xeForm = inject('$xeForm', {});
         const xeformiteminfo = { itemConfig: props.itemConfig };
         provide('xeFormItemInfo', xeformiteminfo);
+        const computeItemVisible = computed(() => {
+            const { visible } = props.itemConfig;
+            return visible;
+        });
         const renderItem = ($xeForm, item) => {
             const formProps = $xeForm.props;
             const $xeGrid = $xeForm.xeGrid;
             const { data, readonly, disabled } = formProps;
-            const { visible, field, itemRender, contentStyle, children, showContent } = item;
+            const { field, itemRender, contentStyle, children, showContent } = item;
+            const itemVisible = computeItemVisible.value;
             const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null;
             const itemStyle = compConf ? (compConf.formItemStyle || compConf.itemStyle) : null;
             const itemContentStyle = compConf ? (compConf.formItemContentStyle || compConf.itemContentStyle) : null;
             const params = { data, disabled, readonly, field, property: field, item, $form: $xeForm, $grid: $xeGrid };
             const hasGroup = children && children.length > 0;
-            if (visible === false) {
+            if (itemVisible === false) {
                 return renderEmptyElement($xeForm);
             }
             return h('div', {
@@ -20353,6 +20525,14 @@ function checkRuleStatus(rule, data, val) {
     }
     return true;
 }
+function createReactData$7() {
+    return {
+        collapseAll: false,
+        staticItems: [],
+        formItems: [],
+        itemWidth: 0
+    };
+}
 function createInternalData$9() {
     return {
         meTimeout: undefined,
@@ -20361,7 +20541,9 @@ function createInternalData$9() {
             item: null,
             visible: false
         },
-        itemFormatCache: {}
+        itemFormatCache: {},
+        fullItemIdData: {},
+        fullItemFieldData: {}
     };
 }
 var VxeFormComponent = defineVxeComponent({
@@ -20460,12 +20642,7 @@ var VxeFormComponent = defineVxeComponent({
         const $xeGrid = inject('$xeGrid', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const reactData = reactive({
-            collapseAll: props.collapseStatus,
-            staticItems: [],
-            formItems: [],
-            itemWidth: 0
-        });
+        const reactData = reactive(createReactData$7());
         const internalData = createInternalData$9();
         const refElem = ref();
         const refTooltip = ref();
@@ -20529,7 +20706,7 @@ var VxeFormComponent = defineVxeComponent({
             }
             return [];
         };
-        const loadItem = (list) => {
+        const loadItems = (list) => {
             if (list.length) {
                 list.forEach((item) => {
                     if (item.slots) {
@@ -20557,8 +20734,9 @@ var VxeFormComponent = defineVxeComponent({
             return itemList;
         };
         const getItemByField = (field) => {
-            const rest = XEUtils.findTree(reactData.formItems, item => item.field === field, { children: 'children' });
-            return rest ? rest.item : null;
+            const { fullItemFieldData } = internalData;
+            const itemRest = fullItemFieldData[field];
+            return itemRest ? itemRest.item : null;
         };
         const getCollapseStatus = () => {
             return reactData.collapseAll;
@@ -20622,6 +20800,23 @@ var VxeFormComponent = defineVxeComponent({
             }
             return resetValue;
         };
+        const cacheItem = () => {
+            const { formItems } = reactData;
+            const itemIdData = {};
+            const itemFieldData = {};
+            XEUtils.eachTree(formItems, (item, index, items) => {
+                const { id, field } = item;
+                const itemRest = { item, items, index };
+                if (id) {
+                    itemIdData[id] = itemRest;
+                }
+                if (field) {
+                    itemFieldData[field] = itemRest;
+                }
+            }, { children: 'children' });
+            internalData.fullItemFieldData = itemFieldData;
+            internalData.fullItemIdData = itemIdData;
+        };
         const reset = () => {
             const { data } = props;
             const itemList = getItems();
@@ -21002,10 +21197,25 @@ var VxeFormComponent = defineVxeComponent({
         const handleGlobalResizeEvent = () => {
             recalculate();
         };
+        const handleItemVisible = (visible) => {
+            return function (fieldOrItems) {
+                const objs = XEUtils.isArray(fieldOrItems) ? fieldOrItems : [fieldOrItems];
+                objs.forEach(obj => {
+                    const item = handleFieldOrItem($xeForm, obj);
+                    if (item) {
+                        item.visible = visible;
+                    }
+                });
+                return nextTick();
+            };
+        };
         formMethods = {
             dispatchEvent(type, params, evnt) {
                 emit(type, createEvent(evnt, { $form: $xeForm, $grid: $xeGrid }, params));
             },
+            loadItems,
+            showItem: handleItemVisible(true),
+            hideItem: handleItemVisible(false),
             reset,
             validate,
             validateField,
@@ -21054,12 +21264,12 @@ var VxeFormComponent = defineVxeComponent({
                     : formItems.map((item, index) => {
                         return h(VxeFormConfigItem, {
                             key: index,
-                            itemConfig: item
+                            itemConfig: item,
+                            visible: item.visible
                         });
                     })),
                 h('div', {
-                    class: 'vxe-form-slots',
-                    ref: 'hideItem'
+                    class: 'vxe-form-slots'
                 }, customLayout ? [] : (defaultSlot ? defaultSlot({}) : [])),
                 /**
                  * 加载中
@@ -21096,6 +21306,7 @@ var VxeFormComponent = defineVxeComponent({
         watch(staticItemFlag, () => {
             reactData.formItems = reactData.staticItems;
             recalcFlag.value++;
+            cacheItem();
         });
         const itemFlag = ref(0);
         watch(() => props.items ? props.items.length : -1, () => {
@@ -21105,7 +21316,7 @@ var VxeFormComponent = defineVxeComponent({
             itemFlag.value++;
         });
         watch(itemFlag, () => {
-            loadItem(props.items || []);
+            loadItems(props.items || []);
         });
         watch(() => props.collapseStatus, (value) => {
             reactData.collapseAll = !!value;
@@ -21128,8 +21339,9 @@ var VxeFormComponent = defineVxeComponent({
             globalEvents.off($xeForm, 'resize');
             XEUtils.assign(internalData, createInternalData$9());
         });
+        reactData.collapseAll = !!props.collapseStatus;
         if (props.items) {
-            loadItem(props.items);
+            loadItems(props.items);
         }
         provide('xeFormItemInfo', null);
         provide('$xeForm', $xeForm);
@@ -21152,159 +21364,6 @@ dynamicApp.use(VxeForm);
 VxeUI.component(VxeFormComponent);
 const Form = VxeForm;
 
-const formItemProps = {
-    title: String,
-    field: String,
-    span: {
-        type: [String, Number],
-        default: null
-    },
-    align: {
-        type: String,
-        default: null
-    },
-    verticalAlign: {
-        type: String,
-        default: null
-    },
-    titleBackground: {
-        type: Boolean,
-        default: null
-    },
-    titleBold: {
-        type: Boolean,
-        default: null
-    },
-    titleAlign: {
-        type: String,
-        default: null
-    },
-    titleWidth: {
-        type: [String, Number],
-        default: null
-    },
-    titleColon: {
-        type: Boolean,
-        default: null
-    },
-    titleAsterisk: {
-        type: Boolean,
-        default: null
-    },
-    showTitle: {
-        type: Boolean,
-        default: true
-    },
-    vertical: {
-        type: Boolean,
-        default: null
-    },
-    padding: {
-        type: Boolean,
-        default: null
-    },
-    formatter: [String, Function],
-    className: [String, Function],
-    contentClassName: [String, Function],
-    contentStyle: [Object, Function],
-    titleClassName: [String, Function],
-    titleStyle: [Object, Function],
-    titleOverflow: {
-        type: [Boolean, String],
-        default: null
-    },
-    titlePrefix: Object,
-    titleSuffix: Object,
-    resetValue: { default: null },
-    visibleMethod: Function,
-    visible: {
-        type: Boolean,
-        default: null
-    },
-    showContent: {
-        type: Boolean,
-        default: null
-    },
-    folding: Boolean,
-    collapseNode: Boolean,
-    itemRender: Object,
-    rules: Array,
-    params: Object
-};
-var VxeFormItemComponent = defineVxeComponent({
-    name: 'VxeFormItem',
-    props: formItemProps,
-    setup(props, { slots }) {
-        const xID = XEUtils.uniqueId();
-        const refElem = ref();
-        const $xeForm = inject('$xeForm', {});
-        const $xeFormGroup = inject('$xeFormGroup', null);
-        const formItem = reactive(createItem($xeForm, props));
-        formItem.slots = slots;
-        const formItemInfo = { itemConfig: formItem };
-        provide('xeFormItemInfo', formItemInfo);
-        const renderItem = ($xeForm, item) => {
-            const formProps = $xeForm.props;
-            const $xeGrid = $xeForm.xeGrid;
-            const { data, readonly, disabled } = formProps;
-            const { visible, field, itemRender, contentStyle, showContent } = item;
-            const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null;
-            const itemStyle = compConf ? (compConf.formItemStyle || compConf.itemStyle) : null;
-            const itemContentStyle = compConf ? (compConf.formItemContentStyle || compConf.itemContentStyle) : null;
-            const params = { data, disabled, readonly, field, property: field, item, $form: $xeForm, $grid: $xeGrid };
-            if (visible === false) {
-                return renderEmptyElement($xeFormItem);
-            }
-            return h('div', {
-                ref: refElem,
-                key: item.id,
-                itemid: item.id,
-                class: getItemClass($xeForm, item),
-                style: XEUtils.isFunction(itemStyle) ? itemStyle(params) : itemStyle
-            }, [
-                renderTitle($xeForm, item),
-                showContent === false
-                    ? renderEmptyElement($xeFormItem)
-                    : h('div', {
-                        class: getItemContentClass($xeForm, item),
-                        style: Object.assign({}, XEUtils.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, XEUtils.isFunction(contentStyle) ? contentStyle(params) : contentStyle)
-                    }, [
-                        renderItemContent($xeForm, item),
-                        renderItemErrorIcon($xeForm, item)
-                    ])
-            ]);
-        };
-        const renderVN = () => {
-            const customLayout = $xeForm ? $xeForm.props.customLayout : false;
-            const item = formItem;
-            return customLayout
-                ? renderItem($xeForm, item)
-                : h('div', {
-                    ref: refElem
-                });
-        };
-        const $xeFormItem = {
-            xID,
-            formItem,
-            renderVN
-        };
-        watchItem(props, formItem);
-        onMounted(() => {
-            const elem = refElem.value;
-            assembleItem($xeForm, elem, formItem, $xeFormGroup);
-        });
-        onUnmounted(() => {
-            destroyItem($xeForm, formItem);
-        });
-        provide('$xeFormItem', $xeFormItem);
-        provide('$xeFormGroup', null);
-        return $xeFormItem;
-    },
-    render() {
-        return this.renderVN();
-    }
-});
-
 var VxeFormGroupComponent = defineVxeComponent({
     name: 'VxeFormGroup',
     props: formItemProps,
@@ -26464,7 +26523,10 @@ var VxeSelectComponent = defineVxeComponent({
     props: {
         modelValue: [String, Number, Boolean, Array],
         defaultConfig: Object,
-        clearable: Boolean,
+        clearable: {
+            type: Boolean,
+            default: () => getConfig$3().select.clearable
+        },
         placeholder: String,
         readonly: {
             type: Boolean,
@@ -33179,7 +33241,10 @@ var VxeTableSelectComponent = defineVxeComponent({
     name: 'VxeTableSelect',
     props: {
         modelValue: [String, Number, Array],
-        clearable: Boolean,
+        clearable: {
+            type: Boolean,
+            default: getConfig$3().tableSelect.clearable
+        },
         placeholder: {
             type: String,
             default: () => XEUtils.eqNull(getConfig$3().tableSelect.placeholder) ? getI18n$2('vxe.base.pleaseSelect') : getConfig$3().tableSelect.placeholder
@@ -38622,7 +38687,10 @@ var VxeTreeSelectComponent = defineVxeComponent({
     name: 'VxeTreeSelect',
     props: {
         modelValue: [String, Number, Array],
-        clearable: Boolean,
+        clearable: {
+            type: Boolean,
+            default: getConfig$3().treeSelect.clearable
+        },
         placeholder: {
             type: String,
             default: () => XEUtils.eqNull(getConfig$3().treeSelect.placeholder) ? getI18n$2('vxe.base.pleaseSelect') : getConfig$3().treeSelect.placeholder
@@ -40044,7 +40112,9 @@ var VxeUploadComponent = defineVxeComponent({
         const computeMoreOpts = computed(() => {
             return Object.assign({ showMoreButton: true }, props.moreConfig);
         });
-        const computeMaps = {};
+        const computeMaps = {
+            computeUrlProp
+        };
         const $xeUpload = {
             xID,
             props,
@@ -40437,14 +40507,16 @@ var VxeUploadComponent = defineVxeComponent({
             handleChange(fileList);
             // 自动更新校验状态
             if ($xeForm && formItemInfo) {
-                $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, fileList);
+                $xeForm.triggerItemEvent(evnt || { type: 'remove' }, formItemInfo.itemConfig.field, fileList);
+            }
+            if (evnt) {
+                dispatchEvent('remove', { option: item }, evnt);
             }
-            dispatchEvent('remove', { option: item }, evnt);
         };
         const removeFileEvent = (evnt, item, index) => {
             const beforeRemoveFn = props.beforeRemoveMethod || getConfig$3().upload.beforeRemoveMethod;
             const removeFn = props.removeMethod || getConfig$3().upload.removeMethod;
-            Promise.resolve(beforeRemoveFn
+            return Promise.resolve(beforeRemoveFn
                 ? beforeRemoveFn({
                     $upload: $xeUpload,
                     option: item
@@ -40464,8 +40536,11 @@ var VxeUploadComponent = defineVxeComponent({
                     }
                 }
                 else {
-                    dispatchEvent('remove-fail', { option: item }, evnt);
+                    if (evnt) {
+                        dispatchEvent('remove-fail', { option: item }, evnt);
+                    }
                 }
+                return status;
             });
         };
         const handleDownloadEvent = (evnt, item) => {
@@ -40824,11 +40899,46 @@ var VxeUploadComponent = defineVxeComponent({
         const handleGlobalBlurEvent = () => {
             reactData.isActivated = false;
         };
+        const handleClearFile = (evnt) => {
+            const { fileList } = reactData;
+            const urlProp = computeUrlProp.value;
+            const rest = [];
+            XEUtils.lastEach(fileList, (item, index) => {
+                rest.push(removeFileEvent(evnt, item, index).then((status) => {
+                    return { url: item[urlProp], status };
+                }));
+            });
+            return Promise.all(rest);
+        };
+        const handleRemoveFile = (evnt, urlOrItem) => {
+            const { fileList } = reactData;
+            const urlProp = computeUrlProp.value;
+            const urls = (XEUtils.isArray(urlOrItem) ? urlOrItem : [urlOrItem]);
+            const rest = [];
+            urls.forEach((obj) => {
+                if (obj) {
+                    const url = XEUtils.isString(obj) ? obj : obj[urlProp];
+                    const index = XEUtils.findIndexOf(fileList, fileItem => fileItem[urlProp] === url);
+                    if (index > -1) {
+                        rest.push(removeFileEvent(evnt, fileList[index], index).then(status => {
+                            return { url, status };
+                        }));
+                    }
+                }
+            });
+            return Promise.all(rest);
+        };
         const uploadMethods = {
             dispatchEvent,
             choose() {
                 return handleChoose(null);
             },
+            clear() {
+                return handleClearFile(null);
+            },
+            clearByEvent(evnt) {
+                return handleClearFile(evnt);
+            },
             getPendingFiles() {
                 const { fileList, fileCacheMaps } = reactData;
                 const pendingFiles = [];
@@ -40891,9 +41001,17 @@ var VxeUploadComponent = defineVxeComponent({
                     VxeUI.modal.close(internalData.moreId);
                 }
                 return nextTick();
+            },
+            remove(urlOrItem) {
+                return handleRemoveFile(null, urlOrItem);
+            },
+            removeByEvent(evnt, urlOrItem) {
+                return handleRemoveFile(evnt, urlOrItem);
             }
         };
-        const uploadPrivateMethods = {};
+        const uploadPrivateMethods = {
+            removeFileEvent
+        };
         Object.assign($xeUpload, uploadMethods, uploadPrivateMethods);
         const renderFileItemList = (currList, isMoreView) => {
             const { showRemoveButton, showDownloadButton, showProgress, progressText, showPreview, showErrorStatus, dragSort, autoSubmit, showSubmitButton } = props;