@hw-component/form 1.9.6 → 1.9.8

package/es/Form/FormItem/BasicItem.js

@@ -122,6 +122,7 @@ var Index = function Index(props) {
       colon: false,
       required: false,
       noStyle: noStyle,
+      hidden: disHide,
       children: noStyle ? defaultRender(form) : jsx(Content, {
         helper: helper,
         children: defaultRender(form)

package/es/Form/hooks/index.d.ts

@@ -7,7 +7,7 @@ interface UseValuesChangeModal {
 }
 export declare const useCurrentForm: (form?: HFormInstance) => HFormInstance;
 type ParamsModal = Omit<HFormProps, "configData">;
-export declare const useInfoReq: ({ initialValues, infoRequest, form, params, request, onFinish, }: ParamsModal) => {
+export declare const useInfoReq: ({ initialValues, infoRequest, form, params, request, onFinish, preserve }: ParamsModal) => {
     subControl: import("@ahooksjs/use-request/lib/types").BaseResult<void, [value: any]>;
     infoControl: import("@ahooksjs/use-request/lib/types").BaseResult<any, [reqParams?: any]>;
 };

package/es/Form/hooks/index.js

@@ -27,7 +27,8 @@ var useInfoReq = function useInfoReq(_ref) {
     form = _ref.form,
     params = _ref.params,
     request = _ref.request,
-    onFinish = _ref.onFinish;
+    onFinish = _ref.onFinish,
+    preserve = _ref.preserve;
   var reqData = useMemo(function () {
     var saveParams = params || {};
     return {
@@ -40,7 +41,7 @@ var useInfoReq = function useInfoReq(_ref) {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            subVal = form === null || form === void 0 ? void 0 : form.outputValues(value);
+            subVal = form === null || form === void 0 ? void 0 : form.outputValues(value, preserve);
             if (!request) {
               _context.next = 4;
               break;

package/es/Form/hooks/useHForm.js

@@ -177,8 +177,8 @@ var useHForm = (function () {
         }
         Reflect.deleteProperty(dispatchSourceData, key);
       },
-      outputValues: function outputValues(value) {
-        var val = value || form.getFieldsValue();
+      outputValues: function outputValues(value, preserve) {
+        var val = value || form.getFieldsValue(preserve);
         return formatValuesFn(val, "outputValue");
       }
     }, form), {}, {

package/es/Form/index.d.ts

@@ -1,3 +1,3 @@
 import type { HFormProps } from "./modal";
-declare const _default: ({ configData, labelWidth, form, request, onFinish, infoRequest, valueType, initialValues, params, onValuesChange, itemSpan, hideLabel: formHideLabel, gutter, submitLoading, labelAlign: formLabelAlign, formItemStyle, itemProps: formItemProps, colon, dismissOnPressEnter, ...props }: HFormProps) => JSX.Element;
+declare const _default: ({ configData, labelWidth, form, request, onFinish, infoRequest, valueType, initialValues, params, onValuesChange, itemSpan, hideLabel: formHideLabel, gutter, submitLoading, labelAlign: formLabelAlign, formItemStyle, itemProps: formItemProps, colon, dismissOnPressEnter, preserve, ...props }: HFormProps) => JSX.Element;
 export default _default;

package/es/Form/index.js

@@ -18,7 +18,7 @@ import { useState, useEffect } from 'react';
 import InitSet from './InitSet.js';
 import Basic from './Basic.js';
 
-var _excluded = ["configData", "labelWidth", "form", "request", "onFinish", "infoRequest", "valueType", "initialValues", "params", "onValuesChange", "itemSpan", "hideLabel", "gutter", "submitLoading", "labelAlign", "formItemStyle", "itemProps", "colon", "dismissOnPressEnter"];
+var _excluded = ["configData", "labelWidth", "form", "request", "onFinish", "infoRequest", "valueType", "initialValues", "params", "onValuesChange", "itemSpan", "hideLabel", "gutter", "submitLoading", "labelAlign", "formItemStyle", "itemProps", "colon", "dismissOnPressEnter", "preserve"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var HForm = (function (_ref) {
@@ -46,6 +46,7 @@ var HForm = (function (_ref) {
     _ref$colon = _ref.colon,
     colon = _ref$colon === void 0 ? true : _ref$colon,
     dismissOnPressEnter = _ref.dismissOnPressEnter,
+    preserve = _ref.preserve,
     props = _objectWithoutProperties(_ref, _excluded);
   var hForm = useCurrentForm(form);
   var _useState = useState({}),
@@ -59,7 +60,8 @@ var HForm = (function (_ref) {
       valueType: valueType,
       form: hForm,
       infoRequest: infoRequest,
-      params: params
+      params: params,
+      preserve: preserve
     }),
     subControl = _useInfoReq.subControl,
     infoControl = _useInfoReq.infoControl;
@@ -106,7 +108,8 @@ var HForm = (function (_ref) {
       children: jsxs(Form, _objectSpread(_objectSpread({
         form: hForm,
         onFinish: run,
-        onValuesChange: valuesChange
+        onValuesChange: valuesChange,
+        preserve: preserve
       }, props), {}, {
         children: [jsx(Basic, {
           configData: configData,

package/es/Form/modal.d.ts

@@ -127,7 +127,7 @@ export interface HFormInstance extends FormInstance {
     initValues: VoidFunction;
     formatValues: (values?: Record<string, any>, formatKey?: string) => Record<string, any>;
     dispatch: (action: ActionModal, ...args: any[]) => void;
-    outputValues: (values?: Record<string, any>) => Record<string, any>;
+    outputValues: (values?: Record<string, any>, preserve?: HFormProps["preserve"]) => Record<string, any>;
     addDispatchListener: AddDispatchListenerFn;
     removeDispatchListener: (action?: ActionModal, fn?: argsFn) => void;
     reload: PromiseFnResult;

package/es/Select/hooks/util.js

@@ -80,15 +80,8 @@ var resultProvider = function resultProvider(newData, oldData, value) {
   });
   return newResult;
 };
-var multiple = function multiple(_ref3, oldVal) {
-  var options = _ref3.options,
-    value = _ref3.value;
-  var _sourceDataProvider = sourceDataProvider({
-      value: value
-    }, oldVal),
-    newData = _sourceDataProvider.newData,
-    oldData = _sourceDataProvider.oldData;
-  var newMatchVal = newData.map(function (item) {
+var notMatchArray = function notMatchArray(data, options) {
+  return data.map(function (item) {
     var itemVal = item.value,
       index = item.index;
     var newItem = single({
@@ -99,7 +92,18 @@ var multiple = function multiple(_ref3, oldVal) {
       index: index
     });
   });
-  return resultProvider(newMatchVal, oldData, value);
+};
+var multiple = function multiple(_ref3, oldVal) {
+  var options = _ref3.options,
+    value = _ref3.value;
+  var _sourceDataProvider = sourceDataProvider({
+      value: value
+    }, oldVal),
+    newData = _sourceDataProvider.newData,
+    oldData = _sourceDataProvider.oldData;
+  var notMatchOldVal = notMatchArray(oldData, options);
+  var newMatchVal = notMatchArray(newData, options);
+  return resultProvider(newMatchVal, notMatchOldVal, value);
 };
 var tag = function tag(_ref4, oldVal) {
   var options = _ref4.options,

package/es/Upload/modal.d.ts

@@ -9,7 +9,8 @@ export interface IUpLoadProps extends Omit<UploadProps, "onChange"> {
     exFiles?: string[] | null;
     request?: (file: Exclude<BeforeUploadFileType, File | boolean> | RcFile) => Promise<{
         url: string;
-    }> | null;
+        thumbUrl?: string;
+    }>;
     errorType?: "alert" | "show";
     onChange?: (fileList: UploadFile[]) => void;
     value?: UploadFile[];

package/lib/Form/FormItem/BasicItem.js

@@ -125,6 +125,7 @@ var Index = function Index(props) {
       colon: false,
       required: false,
       noStyle: noStyle,
+      hidden: disHide,
       children: noStyle ? defaultRender(form) : jsxRuntime.jsx(Content, {
         helper: helper,
         children: defaultRender(form)

package/lib/Form/hooks/index.d.ts

@@ -7,7 +7,7 @@ interface UseValuesChangeModal {
 }
 export declare const useCurrentForm: (form?: HFormInstance) => HFormInstance;
 type ParamsModal = Omit<HFormProps, "configData">;
-export declare const useInfoReq: ({ initialValues, infoRequest, form, params, request, onFinish, }: ParamsModal) => {
+export declare const useInfoReq: ({ initialValues, infoRequest, form, params, request, onFinish, preserve }: ParamsModal) => {
     subControl: import("@ahooksjs/use-request/lib/types").BaseResult<void, [value: any]>;
     infoControl: import("@ahooksjs/use-request/lib/types").BaseResult<any, [reqParams?: any]>;
 };

package/lib/Form/hooks/index.js

@@ -28,7 +28,8 @@ var useInfoReq = function useInfoReq(_ref) {
     form = _ref.form,
     params = _ref.params,
     request = _ref.request,
-    onFinish = _ref.onFinish;
+    onFinish = _ref.onFinish,
+    preserve = _ref.preserve;
   var reqData = React.useMemo(function () {
     var saveParams = params || {};
     return {
@@ -41,7 +42,7 @@ var useInfoReq = function useInfoReq(_ref) {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            subVal = form === null || form === void 0 ? void 0 : form.outputValues(value);
+            subVal = form === null || form === void 0 ? void 0 : form.outputValues(value, preserve);
             if (!request) {
               _context.next = 4;
               break;

package/lib/Form/hooks/useHForm.js

@@ -180,8 +180,8 @@ var useHForm = (function () {
         }
         Reflect.deleteProperty(dispatchSourceData, key);
       },
-      outputValues: function outputValues(value) {
-        var val = value || form.getFieldsValue();
+      outputValues: function outputValues(value, preserve) {
+        var val = value || form.getFieldsValue(preserve);
         return formatValuesFn(val, "outputValue");
       }
     }, form), {}, {

package/lib/Form/index.d.ts

@@ -1,3 +1,3 @@
 import type { HFormProps } from "./modal";
-declare const _default: ({ configData, labelWidth, form, request, onFinish, infoRequest, valueType, initialValues, params, onValuesChange, itemSpan, hideLabel: formHideLabel, gutter, submitLoading, labelAlign: formLabelAlign, formItemStyle, itemProps: formItemProps, colon, dismissOnPressEnter, ...props }: HFormProps) => JSX.Element;
+declare const _default: ({ configData, labelWidth, form, request, onFinish, infoRequest, valueType, initialValues, params, onValuesChange, itemSpan, hideLabel: formHideLabel, gutter, submitLoading, labelAlign: formLabelAlign, formItemStyle, itemProps: formItemProps, colon, dismissOnPressEnter, preserve, ...props }: HFormProps) => JSX.Element;
 export default _default;

package/lib/Form/index.js

@@ -21,7 +21,7 @@ var React = require('react');
 var InitSet = require('./InitSet.js');
 var Basic = require('./Basic.js');
 
-var _excluded = ["configData", "labelWidth", "form", "request", "onFinish", "infoRequest", "valueType", "initialValues", "params", "onValuesChange", "itemSpan", "hideLabel", "gutter", "submitLoading", "labelAlign", "formItemStyle", "itemProps", "colon", "dismissOnPressEnter"];
+var _excluded = ["configData", "labelWidth", "form", "request", "onFinish", "infoRequest", "valueType", "initialValues", "params", "onValuesChange", "itemSpan", "hideLabel", "gutter", "submitLoading", "labelAlign", "formItemStyle", "itemProps", "colon", "dismissOnPressEnter", "preserve"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var HForm = (function (_ref) {
@@ -49,6 +49,7 @@ var HForm = (function (_ref) {
     _ref$colon = _ref.colon,
     colon = _ref$colon === void 0 ? true : _ref$colon,
     dismissOnPressEnter = _ref.dismissOnPressEnter,
+    preserve = _ref.preserve,
     props = _objectWithoutProperties(_ref, _excluded);
   var hForm = index.useCurrentForm(form);
   var _useState = React.useState({}),
@@ -62,7 +63,8 @@ var HForm = (function (_ref) {
       valueType: valueType,
       form: hForm,
       infoRequest: infoRequest,
-      params: params
+      params: params,
+      preserve: preserve
     }),
     subControl = _useInfoReq.subControl,
     infoControl = _useInfoReq.infoControl;
@@ -109,7 +111,8 @@ var HForm = (function (_ref) {
       children: jsxRuntime.jsxs(antd.Form, _objectSpread(_objectSpread({
         form: hForm,
         onFinish: run,
-        onValuesChange: valuesChange
+        onValuesChange: valuesChange,
+        preserve: preserve
       }, props), {}, {
         children: [jsxRuntime.jsx(Basic.default, {
           configData: configData,

package/lib/Form/modal.d.ts

@@ -127,7 +127,7 @@ export interface HFormInstance extends FormInstance {
     initValues: VoidFunction;
     formatValues: (values?: Record<string, any>, formatKey?: string) => Record<string, any>;
     dispatch: (action: ActionModal, ...args: any[]) => void;
-    outputValues: (values?: Record<string, any>) => Record<string, any>;
+    outputValues: (values?: Record<string, any>, preserve?: HFormProps["preserve"]) => Record<string, any>;
     addDispatchListener: AddDispatchListenerFn;
     removeDispatchListener: (action?: ActionModal, fn?: argsFn) => void;
     reload: PromiseFnResult;

package/lib/Select/hooks/util.js

@@ -81,15 +81,8 @@ var resultProvider = function resultProvider(newData, oldData, value) {
   });
   return newResult;
 };
-var multiple = function multiple(_ref3, oldVal) {
-  var options = _ref3.options,
-    value = _ref3.value;
-  var _sourceDataProvider = sourceDataProvider({
-      value: value
-    }, oldVal),
-    newData = _sourceDataProvider.newData,
-    oldData = _sourceDataProvider.oldData;
-  var newMatchVal = newData.map(function (item) {
+var notMatchArray = function notMatchArray(data, options) {
+  return data.map(function (item) {
     var itemVal = item.value,
       index = item.index;
     var newItem = single({
@@ -100,7 +93,18 @@ var multiple = function multiple(_ref3, oldVal) {
       index: index
     });
   });
-  return resultProvider(newMatchVal, oldData, value);
+};
+var multiple = function multiple(_ref3, oldVal) {
+  var options = _ref3.options,
+    value = _ref3.value;
+  var _sourceDataProvider = sourceDataProvider({
+      value: value
+    }, oldVal),
+    newData = _sourceDataProvider.newData,
+    oldData = _sourceDataProvider.oldData;
+  var notMatchOldVal = notMatchArray(oldData, options);
+  var newMatchVal = notMatchArray(newData, options);
+  return resultProvider(newMatchVal, notMatchOldVal, value);
 };
 var tag = function tag(_ref4, oldVal) {
   var options = _ref4.options,

package/lib/Upload/modal.d.ts

@@ -9,7 +9,8 @@ export interface IUpLoadProps extends Omit<UploadProps, "onChange"> {
     exFiles?: string[] | null;
     request?: (file: Exclude<BeforeUploadFileType, File | boolean> | RcFile) => Promise<{
         url: string;
-    }> | null;
+        thumbUrl?: string;
+    }>;
     errorType?: "alert" | "show";
     onChange?: (fileList: UploadFile[]) => void;
     value?: UploadFile[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/form",
-  "version": "1.9.6",
+  "version": "1.9.8",
   "description": "基于antd二次开发",
   "repository": {
     "type": "git",

package/src/components/Form/FormItem/BasicItem.tsx

@@ -104,6 +104,7 @@ const Index: React.FC<HFormItemProps> = (props) => {
         colon={false}
         required={false}
         noStyle={noStyle}
+        hidden={disHide}
       >
         {noStyle ? (
           defaultRender(form)

package/src/components/Form/hooks/index.ts

@@ -25,6 +25,7 @@ export const useInfoReq = ({
   params,
   request,
   onFinish,
+  preserve
 }: ParamsModal) => {
   const reqData = useMemo(() => {
     const saveParams = params || {};
@@ -35,7 +36,7 @@ export const useInfoReq = ({
 
   const subControl = useRequest(
     async (value) => {
-      const subVal = form?.outputValues(value);
+      const subVal = form?.outputValues(value,preserve);
       if (request) {
         await request(subVal, reqData.params);
       }

package/src/components/Form/hooks/useHForm.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import { Form } from "antd";
 import type { FormatItemModal, HFormInstance } from "../modal";
 import type { argsFn } from "../modal";
@@ -147,8 +147,8 @@ export default () => {
         }
         Reflect.deleteProperty(dispatchSourceData, key);
       },
-      outputValues(value) {
-        const val = value || form.getFieldsValue();
+      outputValues(value,preserve) {
+        const val = value || form.getFieldsValue((preserve as any));
         return formatValuesFn(val, "outputValue");
       },
       ...form,

package/src/components/Form/index.tsx

@@ -27,6 +27,7 @@ export default ({
   itemProps: formItemProps = {},
   colon = true,
   dismissOnPressEnter,
+                  preserve,
   ...props
 }: HFormProps) => {
   const hForm = useCurrentForm(form);
@@ -40,6 +41,7 @@ export default ({
     form: hForm,
     infoRequest,
     params,
+    preserve
   });
   const valuesChange = useValuesChange({
     onValuesChange,
@@ -93,9 +95,10 @@ export default ({
           form={hForm}
           onFinish={run}
           onValuesChange={valuesChange}
+          preserve={preserve}
           {...props}
         >
-          <Basic configData={configData} dismissOnPressEnter={dismissOnPressEnter} gutter={gutter} />
+          <Basic  configData={configData} dismissOnPressEnter={dismissOnPressEnter} gutter={gutter} />
           <InitSet />
         </Form>
       </FormContext.Provider>

package/src/components/Form/modal.ts

@@ -35,6 +35,7 @@ import type { DataFnProvider } from "../modal";
 import type { ColProps } from "antd/lib/grid/col";
 import type { Gutter } from "antd/lib/grid/row";
 import type { IUrlUploadProps } from "../Upload/modal";
+import {NamePath} from "rc-field-form/es/interface";
 
 type RenderFun = (
   props: HItemProps,
@@ -183,7 +184,7 @@ export interface HFormInstance extends FormInstance {
     formatKey?: string
   ) => Record<string, any>;
   dispatch: (action: ActionModal, ...args: any[]) => void;
-  outputValues: (values?: Record<string, any>) => Record<string, any>;
+  outputValues: (values?: Record<string, any>,preserve?:HFormProps["preserve"]) => Record<string, any>;
   addDispatchListener: AddDispatchListenerFn;
   removeDispatchListener: (action?: ActionModal, fn?: argsFn) => void;
   reload: PromiseFnResult;

package/src/components/Select/hooks/changeHooks.tsx

@@ -56,6 +56,7 @@ export const useValueChange = (params: PartialHSelectProps) => {
     }
     onChange(newChangeVal, subItemOps);
   };
+
   useEffect(() => {
     if (value === null || value === undefined) {
       setVal(undefined);
@@ -68,7 +69,7 @@ export const useValueChange = (params: PartialHSelectProps) => {
 
     if (options) {
       setVal((oldVale) => {
-        return matchNotFind(params, oldVale);
+        return  matchNotFind(params, oldVale);
       });
     }
   }, [value, options, mode]);

package/src/components/Select/hooks/util.ts

@@ -75,17 +75,21 @@ const resultProvider = (
   });
   return newResult;
 };
-const multiple = ({ options, value }: PartialHSelectProps, oldVal?: any[]) => {
-  const { newData, oldData } = sourceDataProvider({ value }, oldVal);
-  const newMatchVal = newData.map((item) => {
+const notMatchArray=(data,options)=>{
+  return data.map((item)=>{
     const { value: itemVal, index } = item;
     const newItem = single({ options, value: itemVal });
     return {
       ...newItem,
       index,
     };
-  });
-  return resultProvider(newMatchVal, oldData, value);
+  })
+}
+const multiple = ({ options, value }: PartialHSelectProps, oldVal?: any[]) => {
+  const { newData, oldData } = sourceDataProvider({ value }, oldVal);
+  const notMatchOldVal=notMatchArray(oldData,options);
+  const newMatchVal = notMatchArray(newData,options);
+  return resultProvider(newMatchVal, notMatchOldVal, value);
 }; //多选
 
 const tag = ({ options, value }: PartialHSelectProps, oldVal?: any[]) => {

package/src/components/Select/index.tsx

@@ -35,6 +35,7 @@ const Index: React.FC<HSelectProps> = ({
   dispatch,
   isList,
   onPopupScroll: propsOnPopupScroll,
+
   ...props
 }) => {
   const { icon, render } = modeConfig?.[mode || ""] || {};

package/src/components/Upload/hooks/customRequest.ts

@@ -3,13 +3,10 @@ import type { UploadFile } from "antd/es/upload/interface";
 import type { RcFile } from "antd/lib/upload";
 import { useEffect, useMemo } from "react";
 import type { UploadFileStatus } from "antd/es/upload/interface";
-import type { BeforeUploadFileType } from "rc-upload/lib/interface";
 import { message } from "antd";
 
 interface SubReqParamsModal {
-  request?: (
-    file: Exclude<BeforeUploadFileType, File | boolean> | RcFile
-  ) => Promise<{ url: string; thumbUrl?: string }>;
+  request?:IUpLoadProps['request'];
   file: RcFile;
 }
 interface ResultModal {

package/src/components/Upload/index.tsx

@@ -1,5 +1,4 @@
 import React, {
-  useEffect,
   useImperativeHandle,
   useMemo,
   useState,

package/src/components/Upload/modal.ts

@@ -10,7 +10,7 @@ export interface IUpLoadProps extends Omit<UploadProps, "onChange"> {
   exFiles?: string[] | null;
   request?: (
     file: Exclude<BeforeUploadFileType, File | boolean> | RcFile
-  ) => Promise<{ url: string }>|null;
+  ) => Promise<{ url: string; thumbUrl?: string }>;
   errorType?: "alert" | "show";
   onChange?: (fileList: UploadFile[]) => void;
   value?: UploadFile[];

package/src/pages/Select/index.tsx

@@ -3,6 +3,8 @@ import { Space, Select } from "antd";
 import { useState } from "react";
 export default () => {
   const [selectVal, setSelectVal] = useState([{ name: "11", id: -100 }]);
+  const [op,setOp]=useState([{label:"1",value:1}])
+    const [val,setVal]=useState([2,3]);
   return (
     <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
       <HSelect
@@ -34,9 +36,19 @@ export default () => {
         isList
       />
       <HSelect
-       value={1}
-       options={null}
+       value={val}
+       onChange={(v)=>{
+           console.log(v);
+           setVal(v);
+       }}
+       mode="multiple"
+       options={op}
       />
+        <div onClick={()=>{
+            setOp([{label:"2",value:2}])
+        }}>
+            改变
+        </div>
     </Space>
   );
 };