diff --git a/packages/designer/src/components/composition/use-parameter-editor-data.ts b/packages/designer/src/components/composition/use-parameter-editor-data.ts
index df6a697b2bf59ba37be2f10fd874f53d95c1a2f5..cc40bb891b210bb84a039506725409c8401e0d15 100644
--- a/packages/designer/src/components/composition/use-parameter-editor-data.ts
+++ b/packages/designer/src/components/composition/use-parameter-editor-data.ts
@@ -231,6 +231,14 @@ export function useParameterEditorData(useFormSchemaComposition: UseFormSchema)
         entity.entities.forEach(entity => {
             resolveEntityTreeData(entity, 1, null, data);
         });
+        data.forEach((dataItem: any) => {
+            if (!dataItem.parent || !dataItem.parentId) {
+                dataItem.collapse = false;
+            }
+            if (dataItem.$type === 'ComplexField') {
+                dataItem.collapse = true;
+            }
+        });
         return data;
     }
 
diff --git a/packages/ui-vue/components/button-edit/src/button-edit.props.ts b/packages/ui-vue/components/button-edit/src/button-edit.props.ts
index f4ef55b828650235831463dcbf6f3d0a2750b9bd..d42ca62945066b69fb2774287b86491d8f6bcade 100644
--- a/packages/ui-vue/components/button-edit/src/button-edit.props.ts
+++ b/packages/ui-vue/components/button-edit/src/button-edit.props.ts
@@ -149,7 +149,6 @@ export const buttonEditProps = {
     updateOn: { type: String, default: 'change' },
     keepWidthWithReference: { type: Boolean, default: true },
     placement:{ type: String, default: 'bottom-left' },
-    preventScroll: { type: Boolean, default: false}
 
 } as Record<string, any>;
 
diff --git a/packages/ui-vue/components/button-edit/src/components/tag-edit.component.tsx b/packages/ui-vue/components/button-edit/src/components/tag-edit.component.tsx
index fca1fd86e012e6d4212fba86e610750018d0b901..a7e9d15d1cbe2ba47f25f4b25d2675ba6c0a042d 100644
--- a/packages/ui-vue/components/button-edit/src/components/tag-edit.component.tsx
+++ b/packages/ui-vue/components/button-edit/src/components/tag-edit.component.tsx
@@ -10,6 +10,7 @@ export default function (
 ) {
     const separator = ref(props.separator);
     const { changeTextBoxValue } = useTextBoxComposition;
+    const disabled = computed(() => props.readonly || props.disable);
 
     const tags = computed(() => {
         return modelValue.value ?
@@ -21,7 +22,10 @@ export default function (
     }
 
     return () => {
-        return <FTags id={`${props.id}-tag-editor`} class="form-control" data={tags.value} showClose={true} showInput={true}
+        return <FTags id={`${props.id}-tag-editor`} class="form-control" data={tags.value} 
+        showClose={!disabled.value} 
+        disable={disabled.value} 
+        showInput={true}
             onChange={onTagsChange}></FTags>;
     };
 }
diff --git a/packages/ui-vue/components/button-edit/src/components/text-edit.component.tsx b/packages/ui-vue/components/button-edit/src/components/text-edit.component.tsx
index a7dcbd5637a6265a563ca9bde286ab9810e65ff0..97c879ab66062653ad07aafc67246fb0729bfcb1 100644
--- a/packages/ui-vue/components/button-edit/src/components/text-edit.component.tsx
+++ b/packages/ui-vue/components/button-edit/src/components/text-edit.component.tsx
@@ -17,7 +17,7 @@ export default function (
             (inputElementRef.value as HTMLInputElement)?.select();
         }
         if (props.focusOnCreated) {
-            (inputElementRef.value as HTMLInputElement)?.focus({ preventScroll: props.preventScroll });
+            (inputElementRef.value as HTMLInputElement)?.focus({ preventScroll: true });
         }
     });
 
diff --git a/packages/ui-vue/components/checkbox/src/checkbox.component.tsx b/packages/ui-vue/components/checkbox/src/checkbox.component.tsx
index 6878879b6c3f1f22ea2da3d01b9bf20d50c50b4a..40fd215ce5b0434961645e388861e8479d2a1e2e 100644
--- a/packages/ui-vue/components/checkbox/src/checkbox.component.tsx
+++ b/packages/ui-vue/components/checkbox/src/checkbox.component.tsx
@@ -36,7 +36,7 @@ export default defineComponent({
 
         function allowFocus() {
             if (props.focusOnCreated) {
-                (inputElementRef.value as HTMLInputElement)?.focus();
+                (inputElementRef.value as HTMLInputElement)?.focus({ preventScroll: true });
             }
         }
 
diff --git a/packages/ui-vue/components/combo-list/src/combo-list.component.tsx b/packages/ui-vue/components/combo-list/src/combo-list.component.tsx
index 58d3b9f1ebc6b39fbe0b0726bc6a78852a6008ee..799c842d25f54dbe712b7bdb89672c984ecf14ce 100644
--- a/packages/ui-vue/components/combo-list/src/combo-list.component.tsx
+++ b/packages/ui-vue/components/combo-list/src/combo-list.component.tsx
@@ -32,7 +32,7 @@ export default defineComponent({
         const enableSearch = ref(props.enableSearch);
         const readonly = ref(props.readonly);
         let displayTextStore = '';
-        const { dataSource, displayText, editable, modelValue, getSelectedItemsByDisplayText } = useDataSource(props);
+        const { dataSource, displayText, editable, modelValue, getSelectedItemsByDisplayText, getItemsByDisplayText } = useDataSource(props);
 
         const isMultiSelect = computed(() => props.multiSelect);
 
@@ -74,7 +74,7 @@ export default defineComponent({
          */
         function onClickInput() {
             if (!readonly.value) {
-                displayTextStore = displayText.value;        
+                displayTextStore = displayText.value;
                 // comboEditorRef.value.togglePopup();
             }
         }
@@ -103,6 +103,19 @@ export default defineComponent({
             }
         }
 
+        function onChange(text: string) {
+            if (props.multiSelect) {
+                const itemList = getItemsByDisplayText(text);
+                const valueList = itemList.map((item: any) => item[props.idField || props.valueField]);
+                const value = valueList.join(props.separator);
+                if (modelValue.value !== value) {
+                    modelValue.value = value;
+                    context.emit('update:modelValue', modelValue.value);
+                    context.emit('change', itemList, modelValue.value);
+                }
+            }
+        }
+
         function getDisplayText() {
             return displayText.value;
         }
@@ -157,7 +170,7 @@ export default defineComponent({
                     selectOnCreated={props.selectOnCreated}
                     onClear={onClear}
                     onClick={onClickInput}
-                    // onChange={onDisplayTextChange}
+                    onChange={onChange}
                     onBlur={onClickOutside}
                     onInput={onInput}
                     beforeOpen={props.beforeOpen}
diff --git a/packages/ui-vue/components/common/radio-checkbox/radio-checkbox.props.ts b/packages/ui-vue/components/common/radio-checkbox/radio-checkbox.props.ts
index 91048c702aa9234913f86d1d13a7ab83650366f4..be3ed8dde7ad99a5662d56e09f4678500b377f4e 100644
--- a/packages/ui-vue/components/common/radio-checkbox/radio-checkbox.props.ts
+++ b/packages/ui-vue/components/common/radio-checkbox/radio-checkbox.props.ts
@@ -41,5 +41,5 @@ export const radioCheckboxCommonProps = {
     /** 
      * 选项列表
      */
-    options: { type: Object, default: []}
+    options: { type: Object}
 };
diff --git a/packages/ui-vue/components/common/radio-checkbox/use-check.ts b/packages/ui-vue/components/common/radio-checkbox/use-check.ts
index ed1d952f43cc903c552d6480cea2faa8387c8103..ab16d3249fdd60e3caafa55fac305154bd1c8dfc 100644
--- a/packages/ui-vue/components/common/radio-checkbox/use-check.ts
+++ b/packages/ui-vue/components/common/radio-checkbox/use-check.ts
@@ -49,10 +49,10 @@ export function useCheck(
 
     // 点击单选框事件
     const onClickRadio = (e: MouseEvent) => {
-        e.stopPropagation();
         if (disabled.value) {
             return;
         }
+        e.stopPropagation();
         if (parentProps) {
             // 父组件双向绑定
             if (!checked.value) {
diff --git a/packages/ui-vue/components/data-grid/src/data-grid.component.tsx b/packages/ui-vue/components/data-grid/src/data-grid.component.tsx
index 2a97061a86528ec7f1e907a3d56ad9dd0316f80f..e5549c23e98a14f87cb476cd8cc95d77c28a94ec 100644
--- a/packages/ui-vue/components/data-grid/src/data-grid.component.tsx
+++ b/packages/ui-vue/components/data-grid/src/data-grid.component.tsx
@@ -57,7 +57,7 @@ export default defineComponent({
         const { showSelectAll, updateSelectAllStatus } = useSelectionComposition;
         const isDisabled = computed(() => props.disabled);
         const visibleCapacity = computed(() => {
-            return Math.min(dataView.dataView.value.length, defaultVisibleCapacity.value);
+            return props.virtualized ? Math.min(dataView.dataView.value.length, defaultVisibleCapacity.value): dataView.dataView.value.length;
         });
         const loadingMessage = computed(() => props.loadingConfig.message);
 
@@ -119,7 +119,8 @@ export default defineComponent({
             useVisualDataComposition,
             visibleCapacity,
             preloadCount,
-            sidebarWidth
+            sidebarWidth,
+            useEditComposition
         );
         const { onWheel, dataGridWidth, viewPortHeight, viewPortWidth, resetScroll, updateVisibleRowsOnLatestVisibleScope } = useVirtualScrollComposition;
 
@@ -348,12 +349,13 @@ export default defineComponent({
                 } else {
                     resetScroll();
                 }
-
                 if (showSidebarCheckBox.value && showSelectAll.value) {
                     // 如果启用全选，更新全选状态,此处用于服务端分页简单的跨页多选场景
                     updateSelectAllStatus();
                 }
             }
+            // 清空编辑对象，解绑编辑事件
+            useEditComposition.clear();
         }
 
         function updatePagination(pageOptions: Partial<PaginatonOptions>) {
diff --git a/packages/ui-vue/components/data-view/composition/types.ts b/packages/ui-vue/components/data-view/composition/types.ts
index 0d1f241e92e6b1629a8d61e17991ee5bb57f3d42..cdac854a9a72b19c0798ded3d605fb06845b833a 100644
--- a/packages/ui-vue/components/data-view/composition/types.ts
+++ b/packages/ui-vue/components/data-view/composition/types.ts
@@ -647,10 +647,12 @@ export interface UseVisualDataCell {
 }
 
 export interface UseEdit {
+    clear: () => void;
     getEditor: (cell: VisualDataCell, column: DataColumn, visualDataRow: VisualData) => any;
 
     onClickCell: (payload: MouseEvent, cell: VisualDataCell, row: VisualData, column: DataColumn) => any;
 
+    onClickOutOfCell:(payload: MouseEvent) => void;
     onClickCellByKeyboard: (payload: MouseEvent, cell: VisualDataCell, row: VisualData, column: DataColumn) => any;
 
     onMousedownCell: (payload: MouseEvent) => any;
diff --git a/packages/ui-vue/components/data-view/composition/use-edit.tsx b/packages/ui-vue/components/data-view/composition/use-edit.tsx
index de7a8170b755c1eb615196dc7c08f570ae45aea3..dd96af2df87620fb46d44e35258b9e7b07ffb36e 100644
--- a/packages/ui-vue/components/data-view/composition/use-edit.tsx
+++ b/packages/ui-vue/components/data-view/composition/use-edit.tsx
@@ -23,9 +23,9 @@ import {
 import { cloneDeep, isUndefined } from 'lodash-es';
 
 export function useEdit(
-    props: DataViewOptions, 
-    context: SetupContext, 
-    useIdentifyComposition: UseIdentify, 
+    props: DataViewOptions,
+    context: SetupContext,
+    useIdentifyComposition: UseIdentify,
     useRowComposition: UseRow,
     visibleDatas: Ref<VisualData[]>
 ): UseEdit {
@@ -161,8 +161,8 @@ export function useEdit(
         return Promise.resolve()
             .then(() => {
                 const defaultEditorReadonlyStatus = column.editor?.readonly;
-                if (typeof props.beforeEditCell === 'function') {
-                    return !defaultEditorReadonlyStatus && props.beforeEditCell({ row, cell, rawData: row.raw, column });
+                if (!isUndefined(props.beforeEditCell) && typeof props.beforeEditCell === 'function') {
+                    return props.beforeEditCell({ row, cell, rawData: row.raw, column });
                 }
                 return !defaultEditorReadonlyStatus;
             })
@@ -288,9 +288,9 @@ export function useEdit(
                 // editor.keyboard = false;
             }
             editor.context = { rowData: visualDataRow.raw, column, cell, editor: controlData };
+            editor.readonly = false;
             return <FDynamicFormInput focusOnCreated={props.focusOnEditingCell}
                 selectOnCreated={props.selectOnEditingCell}
-                preventScroll={true}
                 editor={editor} v-model={cell.editingData} id={column.id}
                 onMousedown={(payload: MouseEvent) => onMousedownCell(payload)}
                 onMouseup={(payload: MouseEvent) => onMouseupCell(payload)}
@@ -302,7 +302,7 @@ export function useEdit(
     function onEndEditCell() {
         allowEndEditing(editingCell);
     }
-    
+
     watch(
         () => props.editable,
         () => {
@@ -315,15 +315,25 @@ export function useEdit(
     });
 
     // when datasource is changed, editing  status should be reset
-    watch(() => visibleDatas.value, () => {
+    // watch(() => visibleDatas.value, (newvisibleDatas: VisualData[], oldv) => {
+    //     editingCell = null;
+    //     editingRow = null;
+    //     editingColumn = null;
+    //     mousedownTarget = null;
+    //     document.body.removeEventListener('click', onClickOutOfCell, true);
+    // });
+
+    function clear() {
         editingCell = null;
         editingRow = null;
         editingColumn = null;
         mousedownTarget = null;
         document.body.removeEventListener('click', onClickOutOfCell, true);
-    });
+    }
 
     return {
+        clear,
+        onClickOutOfCell,
         onClickCell,
         onClickCellByKeyboard,
         onEditingRow,
diff --git a/packages/ui-vue/components/data-view/composition/use-selection.ts b/packages/ui-vue/components/data-view/composition/use-selection.ts
index 1229e2085a6d79ab8f541c2434e0c51f03d4239c..62967ad7de9cff707ca3f96541cbd796946c19aa 100644
--- a/packages/ui-vue/components/data-view/composition/use-selection.ts
+++ b/packages/ui-vue/components/data-view/composition/use-selection.ts
@@ -344,6 +344,7 @@ export function useSelection(
                 dataItemIds.includes(dataItemId);
         });
         if (visibleItemToBeSelected.length || dataItemToBeSelected.length) {
+            // todo: should not clear,should append selected values
             clearSelection();
             // if single select row, active current row
             if (isSingleSelect.value) {
@@ -378,6 +379,9 @@ export function useSelection(
                 }
             }
         }
+        selectedValues.value = selectedValues.value.filter((selectedId: string) =>
+            !dataItemIds.includes(selectedId)
+        );
     }
 
 
diff --git a/packages/ui-vue/components/data-view/composition/visualization/use-virtual-scroll.ts b/packages/ui-vue/components/data-view/composition/visualization/use-virtual-scroll.ts
index 8d9bb1b03f1ce2a2f78e0d80c857a8bdbfe2f1e9..f104fa8e7884e9e0e0f5938ed3b639293dc88a9c 100644
--- a/packages/ui-vue/components/data-view/composition/visualization/use-virtual-scroll.ts
+++ b/packages/ui-vue/components/data-view/composition/visualization/use-virtual-scroll.ts
@@ -13,7 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ColumnContext, DataViewOptions, UseDataView, UseVirtualScroll, UseVisualData, VisualData } from '../types';
+import {
+    ColumnContext, DataViewOptions, UseDataView, UseEdit,
+    UseVirtualScroll, UseVisualData, VisualData
+} from '../types';
 import { DebouncedFunc, throttle } from 'lodash-es';
 import { computed, ref, Ref, watch } from 'vue';
 
@@ -25,7 +28,8 @@ export function useVirtualScroll(
     visualDataComposition: UseVisualData,
     visibleCapacity: Ref<number>,
     preloadCount: number,
-    sidebarWidth: Ref<number>
+    sidebarWidth: Ref<number>,
+    useEditComposition?: UseEdit
 ): UseVirtualScroll {
     const { dataView, visibleDataItems } = dataViewComposition;
     const { getVisualData, maxVisibleRowIndex, minVisibleRowIndex } = visualDataComposition;
@@ -140,6 +144,14 @@ export function useVirtualScroll(
         const { actualStart, actualEnd } = checkVisualizeDataScope(start, end, lastVisibleRowIndexInDataView);
         const preDataItem = itemsToVisualize[actualStart - 1];
         const visualData = getVisualData(actualStart, actualEnd, preDataItem, forceToRefresh);
+        // if (useEditComposition.getEditingRow()) {
+        //     const editingRow = useEditComposition.getEditingRow();
+        //     const foundVisualDataItemIndex = visualData.findIndex((visualDataItem: VisualData) =>
+        //         visualDataItem.raw[useIdentifyComposition.idField.value] === editingRow?.raw[useIdentifyComposition.idField.value]);
+        //     if (foundVisualDataItemIndex > -1) {
+        //         visualData = [...visualData.slice(0, foundVisualDataItemIndex), editingRow!, ...visualData.slice(foundVisualDataItemIndex + 1)];
+        //     }
+        // }
         if (visualData.length) {
             visibleDatas.value = [...visualData];
         }
@@ -279,9 +291,11 @@ export function useVirtualScroll(
             return;
         }
 
+
         payload.preventDefault();
         payload.stopPropagation();
-
+        // 滚轮滚动时不结束编辑
+        // useEditComposition.onClickOutOfCell(payload);
         const { deltaX, deltaY } = getDeltaFromEvent(payload);
 
         // const deltaY = ((payload as any).wheelDeltaY || payload.deltaY) / 10;
@@ -448,6 +462,7 @@ export function useVirtualScroll(
     }
 
     function onMouseDownScrollThumb($event: MouseEvent, gridContentRef: Ref<any>, thumbType: 'vertical' | 'horizontal') {
+        useEditComposition?.onClickOutOfCell($event);
         onDraggingScrollThumb.value = true;
 
         const scrollThumbParent = ($event.target as Element)?.parentElement;
diff --git a/packages/ui-vue/components/data-view/composition/visualization/use-visual-data-bound.ts b/packages/ui-vue/components/data-view/composition/visualization/use-visual-data-bound.ts
index f599bd1587bf25f12c84ab77e95979a8e859a638..ee18754b3dda1e380377f8a96504805a68e27401 100644
--- a/packages/ui-vue/components/data-view/composition/visualization/use-visual-data-bound.ts
+++ b/packages/ui-vue/components/data-view/composition/visualization/use-visual-data-bound.ts
@@ -15,13 +15,19 @@ export function useVisualDataBound(
             let preDataItemHeight = preDataItem.__fv_data_height__;
             if (isUndefined(preDataItemPosition) ||
                 // when virtual loading, position of tree node should recalculate after collapse tree node. 
-                (props.virtualized && preDataItem.__fv_visible_index__ * rowHeight !== preDataItemPosition)
+                (props.virtualized && props.hierarchy && preDataItem.__fv_visible_index__ * rowHeight !== preDataItemPosition)
             ) {
                 preDataItemPosition = preDataItem.__fv_visible_index__ * rowHeight;
             }
             if (isUndefined(preDataItemHeight)) {
                 preDataItemHeight = rowHeight;
             }
+            // const preDataItemPosition = preDataItem ? (
+            //     preDataItem.__fv_data_position__ !== undefined ? preDataItem.__fv_data_position__ : preDataItem.__fv_index__ * rowHeight
+            // ) : 0;
+            // const preDataItemHeight = preDataItem ? (
+            //     preDataItem.__fv_data_height__ !== undefined ? preDataItem.__fv_data_height__ : rowHeight
+            // ) : 0;
             const topPosition = !visualData.visible ? preDataItem.__fv_data_position__ : preDataItemPosition + preDataItemHeight;
             visualData.top = topPosition;
             dataItem.__fv_data_position__ = topPosition;
diff --git a/packages/ui-vue/components/date-picker/src/date-picker.component.tsx b/packages/ui-vue/components/date-picker/src/date-picker.component.tsx
index 005fea23256894919952c9cd7447e658e957d2f1..909e811eeb82f75b04ea3ee782d40c669f096328 100644
--- a/packages/ui-vue/components/date-picker/src/date-picker.component.tsx
+++ b/packages/ui-vue/components/date-picker/src/date-picker.component.tsx
@@ -182,7 +182,6 @@ export default defineComponent({
                     editable={editable.value}
                     enableClear={enableClear.value}
                     popupOnClick={true}
-                    preventScroll={true}
                     onClear={onClearDate}
                     onClickButton={onClickButton}
                     focusOnCreated={props.focusOnCreated}
diff --git a/packages/ui-vue/components/event-parameter/src/event-parameter.component.tsx b/packages/ui-vue/components/event-parameter/src/event-parameter.component.tsx
index 162e4efdb2c512d4cedd420d5de1b2362c9e5714..c68e315ae81dbd61fd98acd556f5f0557f12b0ed 100644
--- a/packages/ui-vue/components/event-parameter/src/event-parameter.component.tsx
+++ b/packages/ui-vue/components/event-parameter/src/event-parameter.component.tsx
@@ -98,12 +98,12 @@ export default defineComponent({
         const rowOption: Ref<Partial<RowOptions>> = ref({
             customRowStatus: (visualData: VisualData) => {
                 if (visualData.collapse === undefined) {
-                    if (!visualData.raw.parent || !visualData.raw.parentId) {
-                        visualData.collapse = false;
-                    }
-                    if (visualData.raw.data?.$type === 'ComplexField') {
-                        visualData.collapse = true;
-                    }
+                    // if (!visualData.raw.parent || !visualData.raw.parentId) {
+                    //     visualData.collapse = false;
+                    // }
+                    // if (visualData.raw.data?.$type === 'ComplexField') {
+                    //     visualData.collapse = true;
+                    // }
                 }
                 if (visualData.raw.hasChildren) {
                     visualData.disabled = true;
@@ -231,6 +231,9 @@ export default defineComponent({
                                                 fitMode: 'expand'
                                             }}
                                         rowOption={rowOption.value}
+                                        hierarchy={{
+                                            collapseField: 'collapse'
+                                        }}
                                         key={item.treeConfigs.id}
                                         data={item.treeConfigs.data}
                                         columns={columns.value}
diff --git a/packages/ui-vue/components/input-group/src/components/text-edit.component.tsx b/packages/ui-vue/components/input-group/src/components/text-edit.component.tsx
index 275d968f65bc717d57723d8234aea6f7cceb4345..4bfdac155e033e49c69cd5aa9f53c1a14e25c5d4 100644
--- a/packages/ui-vue/components/input-group/src/components/text-edit.component.tsx
+++ b/packages/ui-vue/components/input-group/src/components/text-edit.component.tsx
@@ -42,7 +42,7 @@ export default function (
         }
         if (props.focusOnCreated) {
             // 设置默认
-            (inputElementRef.value as HTMLInputElement)?.focus({ preventScroll: props.preventScroll });
+            (inputElementRef.value as HTMLInputElement)?.focus({ preventScroll: true });
         }
     });
 
diff --git a/packages/ui-vue/components/input-group/src/input-group.props.ts b/packages/ui-vue/components/input-group/src/input-group.props.ts
index 0617ed5c79b07319610ad12f42b1a37beba78340..346aff3cd9d93668dd41b9d8917890414003a1e0 100644
--- a/packages/ui-vue/components/input-group/src/input-group.props.ts
+++ b/packages/ui-vue/components/input-group/src/input-group.props.ts
@@ -91,9 +91,6 @@ export const inputGroupProps = {
      * - change: 输入时更新
      */
     updateOn: { type: String, default: 'blur' },
-    /** 阻止聚焦滚动 默认是浏览器行为会滚动 */
-    preventScroll: { type: Boolean, default: false},
-    
     formatValidation: { type: Object, default: {} }
 } as Record<string, any>;
 
diff --git a/packages/ui-vue/components/number-spinner/src/components/text-box.component.tsx b/packages/ui-vue/components/number-spinner/src/components/text-box.component.tsx
index f4097d75cddbb9bd7d632f2bfdfc561d72f54bde..4a9c093bf2003a6a5137da1b9cbce72c3cb788fe 100644
--- a/packages/ui-vue/components/number-spinner/src/components/text-box.component.tsx
+++ b/packages/ui-vue/components/number-spinner/src/components/text-box.component.tsx
@@ -32,7 +32,7 @@ export default function (
             (inputElementRef.value as HTMLInputElement)?.select();
         }
         if (props.focusOnCreated) {
-            (inputElementRef.value as HTMLInputElement)?.focus({ preventScroll: props.preventScroll });
+            (inputElementRef.value as HTMLInputElement)?.focus({ preventScroll: true });
         }
     }
 
diff --git a/packages/ui-vue/components/number-spinner/src/number-spinner.props.ts b/packages/ui-vue/components/number-spinner/src/number-spinner.props.ts
index 8e65fd062524bc08fe1deae17507824b6bdf1a54..3aaf4f6921b1ee20aeba6aa0bf770a91a32aa286 100644
--- a/packages/ui-vue/components/number-spinner/src/number-spinner.props.ts
+++ b/packages/ui-vue/components/number-spinner/src/number-spinner.props.ts
@@ -132,8 +132,7 @@ export const numberSpinnerProps = {
     /**
      * 是否启用大数
      */
-    bigNumber: { type: Boolean, default: false },
-    preventScroll: { type: Boolean, default: false}
+    bigNumber: { type: Boolean, default: false }
 } as Record<string, any>;
 
 export type NumberSpinnerProps = ExtractPropTypes<typeof numberSpinnerProps>;
diff --git a/packages/ui-vue/components/radio-group/src/radio-group.component.tsx b/packages/ui-vue/components/radio-group/src/radio-group.component.tsx
index 9ef0ea7bb1beeb4b0c3cba9b41f67a0a1298a33f..37c0738885e5b266073796b305159e7cc590c88e 100644
--- a/packages/ui-vue/components/radio-group/src/radio-group.component.tsx
+++ b/packages/ui-vue/components/radio-group/src/radio-group.component.tsx
@@ -15,7 +15,7 @@
  */
 import { defineComponent, computed, ref, provide, watch } from 'vue';
 import type { SetupContext } from 'vue';
-import { RADIOGROUP_CONTEXT } from '@farris/ui-vue/components/common';
+import { RADIOGROUP_CONTEXT, useGuid } from '@farris/ui-vue/components/common';
 import { radioGroupProps, RadioGroupProps } from './radio-group.props';
 import { changeRadio } from './composition/change-radio';
 
@@ -24,6 +24,9 @@ export default defineComponent({
     props: radioGroupProps,
     emits: ['changeValue', 'update:modelValue'] as (string[] & ThisType<void>) | undefined,
     setup(props: RadioGroupProps, context: SetupContext) {
+        const { guid } = useGuid();
+        const defaultRadioName = `radio_${guid().slice(0,8)}`;
+        const name = ref(props.name || defaultRadioName);
         const modelValue = ref(props.modelValue);
         const { enumData, onClickRadio, getValue, getText } = changeRadio(props, context, modelValue);
         const horizontalClass = computed(() => ({
@@ -41,13 +44,13 @@ export default defineComponent({
             return (
                 <div class={['farris-input-wrap', 'btn-group', horizontalClass.value]}>
                     {context.slots.default ? context.slots.default() : enumData.value.map((item, index) => {
-                        const id = 'radio_' + props.id + props.name + item[props.valueField];
+                        const id = 'radio_' + props.id + name.value + item[props.valueField];
                         return (
                             <div class="custom-control custom-radio">
                                 <input
                                     type="radio"
                                     class="custom-control-input"
-                                    name={id}
+                                    name={name.value}
                                     id={id}
                                     value={getValue(item)}
                                     checked={getValue(item) === modelValue.value}
diff --git a/packages/ui-vue/components/radio-group/src/radio-group.props.ts b/packages/ui-vue/components/radio-group/src/radio-group.props.ts
index b7330103c66e7431874ff17a0b9aa4cea1c1518d..02b68e7e3df028e0d311db2abdda8c7b3128f475 100644
--- a/packages/ui-vue/components/radio-group/src/radio-group.props.ts
+++ b/packages/ui-vue/components/radio-group/src/radio-group.props.ts
@@ -35,13 +35,13 @@ export const radioGroupProps = {
      * 单选组枚举数组----废弃
      */
     enumData: {
-        type: Array<Radio>, default: []
+        type: Array<Radio>
     },
     /**
    * 单选组枚举数组
    */
     data: {
-        type: Array<Radio>, default: []
+        type: Array<Radio>
     },
     /**
      * 组件值
diff --git a/packages/ui-vue/components/radio/src/radio.props.ts b/packages/ui-vue/components/radio/src/radio.props.ts
index 7924af935902c1f03d3970a9b731395ec159bebb..c9a0f944f5978dc63c46b04c7b718988e65b9871 100644
--- a/packages/ui-vue/components/radio/src/radio.props.ts
+++ b/packages/ui-vue/components/radio/src/radio.props.ts
@@ -1,6 +1,7 @@
 import { ExtractPropTypes } from "vue";
 
 export const radioProps = {
+    disabled: { type: Boolean, default: false },
     value: { type: String, default: '' },
     /** 值 */
     modelValue: { type: String, default: '' },
diff --git a/packages/ui-vue/components/tags/src/composition/use-draggable.ts b/packages/ui-vue/components/tags/src/composition/use-draggable.ts
index c68735f30cccfea545e5f5cc75d2d23ec7f3b0ee..65cb552310ddaf91aaebdddb5be898fca03b452a 100644
--- a/packages/ui-vue/components/tags/src/composition/use-draggable.ts
+++ b/packages/ui-vue/components/tags/src/composition/use-draggable.ts
@@ -12,6 +12,9 @@ export function useDraggable(
     const isDragging = ref(false);
 
     function dragstart(e: DragEvent, targetItem: any, index: number) {
+        if (props.disable) {
+            return;
+        }
         e.stopPropagation();
         if (targetItem) {
             setTimeout(() => {
@@ -23,6 +26,9 @@ export function useDraggable(
     }
 
     function dragenter(e: DragEvent, index: number) {
+        if (!isDragging.value) {
+            return;
+        }
         e.preventDefault();
         if (draggingIndex.value !== index) {
             const draggingItem = innerElements.value[draggingIndex.value];
@@ -33,6 +39,9 @@ export function useDraggable(
         }
     }
     function dragover(e: DragEvent, index: number) {
+        if (!isDragging.value) {
+            return;
+        }
         e.preventDefault();
         if (e.dataTransfer) {
             e.dataTransfer.dropEffect = 'move';
diff --git a/packages/ui-vue/components/tags/src/tags.component.tsx b/packages/ui-vue/components/tags/src/tags.component.tsx
index 3a19033dc44cd90d66ce72b9c5ec47b217cd634c..ffe87b6451f997e45491b49afcd3cab4fcac5d02 100644
--- a/packages/ui-vue/components/tags/src/tags.component.tsx
+++ b/packages/ui-vue/components/tags/src/tags.component.tsx
@@ -17,7 +17,7 @@ export default defineComponent({
         const showColor = ref(props.showColor);
         const customStyle = ref(props.customStyle);
         const activeTag = ref(props.activeTag);
-        const showClose = ref(props.showClose);
+        // const showClose = ref(props.showClose);
         const addButtonText = ref(props.addButtonText);
         const tagsContainerRef = ref<any>();
         const wrapText = ref(props.wrapText);
@@ -150,6 +150,9 @@ export default defineComponent({
         }
 
         function onKeyDownTagItem(payload: KeyboardEvent, currentTag: Tag) {
+            if(props.disable){
+                return;
+            }
             let leftScroll;
             switch (payload.key) {
                 case 'Backspace':
@@ -274,13 +277,15 @@ export default defineComponent({
                     key={tag.name}
                     onClick={(payload: MouseEvent) => onClickTagItem(payload, tag)}
                     onKeydown={(payload: KeyboardEvent) => onKeyDownTagItem(payload, tag)}
-                    draggable="true"
+                    // 暂不开启拖拽
+                    draggable="false"
                     onDragstart={(payload: DragEvent) => dragstart(payload, tag, index)}
                     onDragenter={(payload: DragEvent) => dragenter(payload, index)}
                     onDragend={(payload: DragEvent) => dragend(payload, tag)}
-                    onDragover={(payload: DragEvent) => dragover(payload, index)}>
+                    onDragover={(payload: DragEvent) => dragover(payload, index)}
+                    >
                     <span title={tag.name} class="tag-box">{tag.name}</span>
-                    {!props.disable && showClose.value && (
+                    {!props.disable && props.showClose && (
                         <span class="tag-delete">
                             <i
                                 class="f-icon f-icon-close"
diff --git a/packages/ui-vue/components/textarea/src/textarea.component.tsx b/packages/ui-vue/components/textarea/src/textarea.component.tsx
index cabe54d095cca2e49cd475cd6067e3a029d19b0c..c1ef9410a6a0046193e00a457fe1d22984c979bc 100644
--- a/packages/ui-vue/components/textarea/src/textarea.component.tsx
+++ b/packages/ui-vue/components/textarea/src/textarea.component.tsx
@@ -199,7 +199,7 @@ export default defineComponent({
                 textAreaRef.value?.select();
             }
             if (props.focusOnCreated) {
-                textAreaRef.value?.focus();
+                textAreaRef.value?.focus({preventScroll: true});
             }
         }
         onMounted(() => {
diff --git a/packages/ui-vue/components/textarea/src/textarea.props.ts b/packages/ui-vue/components/textarea/src/textarea.props.ts
index ae35991a3f542f36a6fc3ceaeb5aedc3df79f2c2..e5495421628a65e7c1d7d930c9f037d4ec307ab2 100644
--- a/packages/ui-vue/components/textarea/src/textarea.props.ts
+++ b/packages/ui-vue/components/textarea/src/textarea.props.ts
@@ -68,7 +68,7 @@ export const textAreaProps = {
      * - blur: 离开焦点时更新
      * - change: 输入时更新
      */
-    updateOn: { type: String, default: 'blur' },
+    updateOn: { type: String, default: 'blur' }
 } as Record<string, any>;
 
 export type TextAreaProps = ExtractPropTypes<typeof textAreaProps>;
diff --git a/packages/ui-vue/components/time-picker/src/time-picker.component.tsx b/packages/ui-vue/components/time-picker/src/time-picker.component.tsx
index 05cd6e34fcce1f744ef76b3a61f55c27cd97449a..e568e97bb1ecddda35ac7c82755a5b11f764a372 100644
--- a/packages/ui-vue/components/time-picker/src/time-picker.component.tsx
+++ b/packages/ui-vue/components/time-picker/src/time-picker.component.tsx
@@ -60,7 +60,6 @@ export default defineComponent({
                     placeholder={props.placeholder}
                     enableClear={true}
                     popupOnClick={true}
-                    preventScroll={true}
                     keepWidthWithReference={false}
                     placement={props.placement}
                     onClear={onClearHandler}
diff --git a/packages/ui-vue/demos/data-grid/operation_data.vue b/packages/ui-vue/demos/data-grid/operation_data.vue
new file mode 100644
index 0000000000000000000000000000000000000000..25c8a4fe254989846811cc762bd516694944c34b
--- /dev/null
+++ b/packages/ui-vue/demos/data-grid/operation_data.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { data } from './demo-data-5'
+import { DataColumn, VisualDataCell } from '../../components/data-view'
+
+const gridRef = ref<any>()
+
+const dataSource = ref(data)
+
+const editOption = {
+    editMode: 'cell'
+}
+
+const columns: DataColumn[] = [
+    {
+        field: 'code',
+        title: '编号',
+        dataType: 'string',
+        sortable: true,
+        valign: 'middle',
+        editor: {
+            type: 'lookup',
+            uri: 'lookup.loaddata',
+            textField: 'name',
+            idField: 'id',
+            mappingFields: { id: 'empID', code: 'empCode', name: 'empName' },
+            mutltiSelect: false,
+            displayType: 'list',
+            separator: ',',
+            editable: 'false'
+        }
+    },
+    { field: 'name', title: '名称', dataType: 'string', sortable: true, filterable: true, valign: 'middle', align: 'right' },
+    {
+        field: 'fullName',
+        title: '全名',
+        dataType: 'string',
+        sortable: true,
+        filterable: true,
+        valign: 'middle',
+        formatter: (cell: VisualDataCell) => {
+            return `我是${cell.data}`
+        }
+    },
+    { field: 'description', title: '说明', dataType: 'text', valign: 'middle' },
+    {
+        field: 'booleanField1',
+        title: '布尔字段',
+        dataType: 'boolean',
+        formatter: {
+            type: 'boolean',
+            trueText: '是',
+            falseText: '否'
+        },
+        valign: 'middle'
+    },
+    // {
+    //     field: 'dateField1',
+    //     title: '日期字段',
+    //     dataType: 'datetime',
+    //     valign: 'middle',
+    //     editor: {
+    //         type: 'date-picker'
+    //         // showTime: true
+    //     },
+    //     formatter: {
+    //         type: 'date',
+    //         dateFormat: 'yyyy年MM月dd日'
+    //     }
+    // },
+    {
+        field: 'numericField1',
+        title: '数字字段一',
+        dataType: 'number',
+        valign: 'middle',
+        editor: {
+            type: 'number-spinner'
+        },
+        formatter: {
+            type: 'number',
+            precision: 2,
+            thousand: ',',
+            prefix: '￥',
+            suffix: '',
+            decimal: '.'
+        }
+    },
+    {
+        field: 'customField1',
+        title: '自定义字段一',
+        dataType: 'string',
+        valign: 'middle',
+        editor: {
+            type: 'button-edit'
+        }
+    }
+]
+
+function createNewDataItem() {
+    return {
+        id: '' + Date.now(),
+        avatar: '',
+        code: '' + Date.now(),
+        name: '',
+        fullName: '',
+        status: '',
+        description: '',
+        booleanField1: false,
+        booleanField2: false,
+        dateField1: '0001/01/01',
+        dateField2: '0001/01/01',
+        datetimeField1: '0001/01/01 00:00:00',
+        datetimeField2: '0001/01/01 00:00:00',
+        enumField1: 'enable',
+        enumField2: '01',
+        numericField1: 0,
+        numericField2: 0,
+        customField1: '',
+        customField2: '',
+        customField3: ''
+    } as any
+}
+
+function add() {
+    const newDataItem = createNewDataItem()
+    dataSource.value = [...dataSource.value, newDataItem]
+    gridRef.value.updateDataSource(dataSource.value)
+}
+
+function remove() {
+    // 获取选中行
+    const selectedItems = gridRef.value.getSelectedItems()
+    // 删除选中行
+    const foundDataItemIndex = dataSource.value.findIndex((dataItem: any) => dataItem.code === selectedItems[0].code)
+    // 更新数据
+    if (foundDataItemIndex > -1) {
+        dataSource.value = [...dataSource.value.slice(0, foundDataItemIndex), ...dataSource.value.slice(foundDataItemIndex + 1)]
+        gridRef.value.updateDataSource(dataSource.value)
+    }
+}
+</script>
+
+<template>
+    <button>add</button>
+    <div class="fv-grid-demo">
+        <f-button @click="add">新增</f-button>
+        <f-button @click="remove">删除</f-button>
+        <f-data-grid
+            ref="gridRef"
+            :columns="columns"
+            id-field="code"
+            :data="dataSource"
+            :editable="true"
+            :edit-option="editOption"
+            :fit="true"
+        >
+        </f-data-grid>
+    </div>
+</template>
+<style>
+.fv-grid-demo {
+    height: 480px;
+}
+</style>
diff --git a/packages/ui-vue/demos/data-grid/select_and_unselect.vue b/packages/ui-vue/demos/data-grid/select_and_unselect.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e9eb08780fb5d951a262819e72bde562dabe04d7
--- /dev/null
+++ b/packages/ui-vue/demos/data-grid/select_and_unselect.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { DataColumn } from '../../components/data-view';
+import { data } from './demo-data';
+
+const gridRef = ref();
+/** 是否支持选择节点，默认为false */
+const showCheckbox = ref(true);
+
+const selectionOption = computed(() => {
+    return {
+        enableSelectRow: true,
+        showCheckbox: showCheckbox.value,
+        showSelectAll:true,
+        multiSelect: false,
+        multiSelectMode: 'DependOnCheck',
+        keepSelectingOnClick: true
+    };
+});
+
+const pagination = {
+    enable: false,
+    size: 20
+};
+
+const rowNumberOption = computed(() => {
+    return {
+        enable: false
+    };
+});
+
+const columns: DataColumn[] = [
+    { field: 'id', title: '标识', dataType: 'string',align:'center' },
+    { field: 'avatar', title: '头像', dataType: 'string' },
+    { field: 'code', title: '编号', dataType: 'string' },
+    { field: 'name', title: '名称', dataType: 'string' },
+    { field: 'fullName', title: '全名', dataType: 'string' },
+    { field: 'status', title: '状况', dataType: 'string' },
+    { field: 'description', title: '说明', dataType: 'text' }
+];
+
+const selectedResult = ref('');
+
+function onSelectionChange(selectedItems: any[]) {
+    selectedResult.value = selectedItems.map((dataItem: any) => dataItem.id).join(',');
+}
+
+function selectItems() {
+    const selectIds = data.slice(0,5).map((dataItem: any) => dataItem.id);
+    gridRef.value.selectItemByIds(selectIds);
+}
+
+function unSelectItems() {
+    const selectIds = data.slice(0,5).map((dataItem: any) => dataItem.id);
+    gridRef.value.unSelectItemByIds(selectIds);
+}
+
+function selectFirstRow() {
+    const id =  data[0].id;
+    // 选中行
+    gridRef.value.selectItemByIds(id);
+    // 高亮行
+    gridRef.value.activeRowById(id);
+}
+</script>
+
+<template>
+    <div class="custom-control custom-checkbox custom-control-inline">
+        <f-button @click="selectItems">选中前五行</f-button>
+    </div>
+    <div class="custom-control custom-checkbox custom-control-inline">
+        <f-button @click="unSelectItems">取消选中前五行</f-button>
+    </div>
+    <div class="custom-control custom-checkbox custom-control-inline">
+        <f-button @click="selectFirstRow">选中第一行</f-button>
+    </div>
+    <div class="custom-control custom-checkbox custom-control-inline">
+        <label class="col-form-label"><span class="farris-label-text">已选数据：</span></label>
+        <div class="farris-input-wrap">
+            <f-text v-model="selectedResult"> </f-text>
+        </div>
+    </div>
+    <div class="fv-grid-demo">
+        <f-data-grid
+            ref="gridRef"
+            :columns="columns"
+            :data="data"
+            :fit="true"
+            :columnOption="{fitColumns:true}"
+            :pagination="pagination"
+            :selection="selectionOption"
+            @selection-change="onSelectionChange"
+        ></f-data-grid>
+    </div>
+</template>
+<style>
+.fv-grid-demo {
+    height: 480px;
+}
+</style>
diff --git a/packages/ui-vue/demos/dynamic-form/dynamic-component.vue b/packages/ui-vue/demos/dynamic-form/dynamic-component.vue
index 158fa4cd4f7b0db711e068200a7a74c0edc2e156..b513748b65282e719e530be03e26bd325059ddb4 100644
--- a/packages/ui-vue/demos/dynamic-form/dynamic-component.vue
+++ b/packages/ui-vue/demos/dynamic-form/dynamic-component.vue
@@ -64,7 +64,7 @@ const checkboxOptions = {
 };
 const radioGroupOptions = {
     type: 'radio-group',
-    enumData: [
+    data: [
         { value: 'first', name: 'Fist Item' },
         { value: 'second', name: 'Second Item' },
         { value: 'third', name: 'Third Item' }
@@ -72,7 +72,7 @@ const radioGroupOptions = {
 };
 const checkboxGroupOptions = {
     type: 'check-group',
-    enumData: [
+    data: [
         { name: '张三', value: 'zhangsan' },
         { name: '李四', value: 'lisi' },
         { name: '王五', value: 'wangwu' },
diff --git a/packages/ui-vue/demos/radio-group/basic.vue b/packages/ui-vue/demos/radio-group/basic.vue
index c43c65c8e254543b4cc636aeb1b89a1aa2c84a4c..40ec51c388db04caba9229e94bdda5848c1ae7ff 100644
--- a/packages/ui-vue/demos/radio-group/basic.vue
+++ b/packages/ui-vue/demos/radio-group/basic.vue
@@ -17,7 +17,7 @@ function onValueChanged(event: any) {
 <template>
     <div>
         <f-radio-group id="basic" :name="name" :value-field="valueField" :text-field="textField"
-            :data="radioEnumData" v-model="value" @change-value="onValueChanged">
+            :options="radioEnumData" v-model="value" @change-value="onValueChanged">
         </f-radio-group>
         <div class="my-2">
             <span>当前选中值: {{ value }}</span>
diff --git a/packages/ui-vue/demos/radio-group/radio_template.vue b/packages/ui-vue/demos/radio-group/radio_template.vue
index 42eb0f7a922c31482ef0de5b4ecd4880945b2066..5fe28fb5e96c095cee0dcf7f890bd9a1454c27a2 100644
--- a/packages/ui-vue/demos/radio-group/radio_template.vue
+++ b/packages/ui-vue/demos/radio-group/radio_template.vue
@@ -15,7 +15,7 @@ function onValueChanged(event: any) {
 </script>
 <template>
     <f-radio-group id="basic" :name="name" :direction="direction" v-model="value" @change-value="onValueChanged">
-        <f-radio value="first">
+        <f-radio value="first" :disabled="true">
             第一项
             <!-- <img style="height: 20px;width:60px;display:inline" src="/farris-docs/assets/gitee.svg" alt="" /> -->
         </f-radio>
diff --git a/packages/ui-vue/docs/.vitepress/config/markdown.ts b/packages/ui-vue/docs/.vitepress/config/markdown.ts
index 24bf3e017e6dc053f92c4bc0b2be74a7e3819233..c18e1568b7127b4014cc34935194001bdcd8f6f1 100644
--- a/packages/ui-vue/docs/.vitepress/config/markdown.ts
+++ b/packages/ui-vue/docs/.vitepress/config/markdown.ts
@@ -6,6 +6,7 @@ const markdown = {
     config: async (md: MarkdownIt) => {
         const highlight = await highlightFactory();
         md.use(farrisMarkdownPlugin, { cssPreprocessor: 'scss', highlight });
-    }
+    },
+    attrs: { disable: true } 
 };
 export default markdown;
diff --git a/packages/ui-vue/docs/components/data-grid/index.md b/packages/ui-vue/docs/components/data-grid/index.md
index b9aa12296cbc2d2c3883e6ed034e2edfbb12209e..58cfb3c8c110df86dd3f54820202ba5416f4a286 100644
--- a/packages/ui-vue/docs/components/data-grid/index.md
+++ b/packages/ui-vue/docs/components/data-grid/index.md
@@ -285,13 +285,33 @@ Data Grid 是展示数据的表格组件，提供分页展示数据，在单元
 
 :::
 
+## 增加和删除操作
 
-## DataGrid属性
+:::vdemo
+
+```vue
+{demos/data-grid/operation_data.vue}
+```
+
+:::
+
+## 选中和取消选中行操作
+
+:::vdemo
+
+```vue
+{demos/data-grid/select_and_unselect.vue}
+```
+
+:::
+
+
+## DataGrid
 
 | 属性名     | <div style="width:200px">类型</div>                 | 默认值    | 说明                 |
 | :---------------------- | :------------------------------- | :--------: | :------------------- |
 | data         | `array`               | --        | 绑定的数据源   |
-| columns      | array<[DataGridColumn](#datagridcolumn属性)>               | --        | 列集合        |
+| columns      | array<[DataGridColumn](#datagridcolumn)>               | --        | 列集合        |
 | disabled    | `boolean`              | false     | 禁用 |
 | editable       | `boolean`   | false   | 允许编辑             |
 | fit       | `boolean`   | false   | 适配父组件尺寸             |
@@ -299,24 +319,27 @@ Data Grid 是展示数据的表格组件，提供分页展示数据，在单元
 | width       | `number`   | -   | 宽度             |
 | minHeight       | `number`   | 300   | 最小高度             |
 | minWidth       | `number`   | 400   | 最小宽度             |
-| idField       | `string`   | id   | 被绑定数据的标识字段             |
+| idField       | `string`   | id   | 行记录的标识属性名             |
 | mergeCell       | `boolean`   | 400   | 纵向合并具有相同值的单元格    |
 | showFooter       | `boolean`   | false   | 显示底部面板             |
 | showHeader       | `boolean`   | true   | 显示顶部面板             |
 | showScrollBar       | `boolean`   | auto   | 显示滚动条             |
-| showSetting       | `boolean`   | false   | 显示设置按钮             |
+| showSetting       | `boolean`   | false   | 显示列设置按钮             |
+| showBorder       | `boolean`   | false   | 显示边框             |
+| showStripe       | `boolean`   | false   | 显示条纹，也叫斑马线样式             |
 | virtualized       | `boolean`   | true   | 启用虚拟渲染             |
-| commandOption  | CommandOptions   | `{enable: false,commands: []}`         |      列配置         |
-| editOption  | `EditOption`   | `{ selectOnEditing: false, editMode:'cell' }`         |      编辑配置，selectOnEditing表示编辑时选中文本，editMode表示 编辑模式； row：整行编辑，cell: 单元格编辑        |
-| pagination       | [PaginatonOptions](#分页属性pagination)   | `{enable:false,size:20}`   | 分页配置            |
-| rowNumber       | `RowNumberOptions`   | `{enable: true,width: 32,heading:'序号'}`   | 行号配置,enable表示是否显示行号，heading表示行号列表头标题，width表示行号宽度  |
-| rowOption       | [RowOptions](#行配置属性rowoption)   | `{wrapContent: false}`   | 行配置             |
-| selection       | [SelectionOptions](#选中行配置属性selection)   | `{enableSelectRow: true,multiSelect: false,multiSelectMode: 'DependOnCheck',showCheckbox: false,showSelectAll: false,showSelection: true}`   | 选中行配置             |
-| sort       | `SortOptions`   | --   | 排序设置，enable标识启用排序，fields标识排序字段集合，mode标识排序交互模式，分为'client'和'server'两种，multiSort表示多列排序             |
-| summary       | `SummaryOptions`   | `{enable: true,groupFields: ['numericField1', 'numericField2']}`   | 合计配置     |
+| columnOption  | [ColumnOptions](#columnoptions)   | `{fitColumns: false,fitMode: 'none'}`         |      列布局配置         |
+| commandOption  | [CommandOptions](#commandoptions)   | `{enable: false,commands: []}`         |      列配置         |
+| editOption  | [EditOptions](#editoptions)   | `{ selectOnEditing: false, editMode:'cell' }`         |      编辑配置
+| pagination       | [PaginatonOptions](#paginatonoptions)   | `{enable:false,size:20}`   | 分页配置            |
+| rowNumber       | [RowNumberOptions](#rownumberoptions)   | `{enable: true,width: 32,heading:'序号'}`   | 行号配置  |
+| rowOption       | [RowOptions](#rowoptions)   | `{wrapContent: false}`   | 行配置      |
+| selection       | [SelectionOptions](#selectionoptions)   | `{enableSelectRow: true,multiSelect: false,multiSelectMode: 'DependOnCheck',showCheckbox: false,showSelectAll: false,showSelection: true}`   | 选中行配置             |
+| summary       | [SummaryOptions](#summaryoptions)   | {enable: true, \ groupFields: ['numericField1', 'numericField2']}   | 合计配置     |
+| group       | [GroupOptions](#groupoptions)   |  {enable: false, groupFields: [],showGroupPanel: false, showSummary: false}  | 数据分组     |
 
 
-## DataGridColumn属性
+## DataGridColumn
 
 | 属性名     | 类型                   | 默认值    | 说明                 |
 | :---------------------- | :------------- | :-------------------- | :------------------- |
@@ -338,7 +361,7 @@ Data Grid 是展示数据的表格组件，提供分页展示数据，在单元
 | formatter(cell: VisualDataCell, visualDataRow: VisualData)     | `function`   | 无默认值，可选属性   | 格式化函数,函数返回值为VNode 或者string类型            |
 
 
-## 分页属性(pagination)
+## PaginatonOptions
 
 | 属性 | 类型                | 默认值         |说明         |
 | :----- | :------------------ | :----------- |:-------------------------- |
@@ -354,7 +377,7 @@ Data Grid 是展示数据的表格组件，提供分页展示数据，在单元
 | total  | `number` | 0 | 总记录数 |
 
 
-## 行配置属性(rowOption)
+## RowOptions
 
 | 属性 | 类型                | 默认值         |说明         |
 | :----- | :------------------ | :----------- |:----------- |
@@ -363,7 +386,7 @@ Data Grid 是展示数据的表格组件，提供分页展示数据，在单元
 | showHovering  | `boolean` | true | 鼠标滑过行效果 |
 | wrapContent  | `boolean` | false | 禁止数据折行 |
 
-## 列配置属性(columnOption)
+## ColumnOptions
 
 | 属性 | 类型                | 默认值         |说明         |
 | :----- | :------------------ | :----------- |:----------- |
@@ -371,11 +394,10 @@ Data Grid 是展示数据的表格组件，提供分页展示数据，在单元
 | fitMode  | `string` | average | 自动适配列宽度模式,'none'或'average'或'expand'或'percentage' |
 | groups  | `array<ColumnGroupItem>` | [] | 分组, ColumnGroupItem结构是field（列标识）,title（标题）和group（ColumnGroupItem结构）|
 | reorderColumn  | `boolean` | false | 允许拖动表头改变列显示顺序 |
-| resizeColumn  | `boolean` | true | 允许拖动改变列宽度 |
 | resizeColumnOnDoubleClick  | `boolean` | true | 双击表头列自适应内容宽度 |
 
 
-## 选中行配置属性(selection)
+## SelectionOptions
 
 | 属性 | 类型                | 默认值         |说明         |
 | :----- | :------------------ | :----------- |:----------- |
@@ -389,9 +411,76 @@ Data Grid 是展示数据的表格组件，提供分页展示数据，在单元
 | showCheckbox  | `boolean` | false | 每行前边显示复选框 |
 | showSelectAll  | `boolean` | false | 显示全选复选框 |
 
-## 事件
+## SummaryOptions
+
+| 属性 | 类型                | 默认值         |说明         |
+| :----- | :------------------ | :----------- |:----------- |
+| enable  | `boolean` | false | 启用合计行 |
+| customSummaryStyle  | `function` | () => {} | 合计行自定义样式，对启用合计行模板无效 |
+| groupFields  | `array<string>` | [] | 分组合计字段 |
+| mode  | `string` | client | 合计交互模式，可以选择client和server两个值 |
+| position  | `string` | false | 合计行显示位置，可以选择bottom、top和both三个值 |
+
+## CommandOptions
+| 属性 | 类型                | 默认值         |说明         |
+| :----- | :------------------ | :----------- |:----------- |
+| enable  | `boolean` | false | 启用操作列 |
+| commands  | `array<ColumnCommand>` | - | 操作列命令集合 |
+
+## ColumnCommand
+| 属性 | 类型                | 默认值         |说明         |
+| :----- | :------------------ | :----------- |:----------- |
+| type  | `string` | - | 类型，与button组件type一致 |
+| text  | `string` | - | 名称 |
+| command  | `string` | - | 四种类型，编辑（edit）、删除（remove）、确定（accept）、取消（cancel） |
+| hidden  | `boolean` | false | 是否隐藏 |
+| icon  | `string` | - | 图标类选择器名称， 如f-icon |
+| onClick  | `function` | - | 触发事件 |
+
+ 
+<!-- ## SortOptions
 
-| 事件名 | 回调参数                | 说明         |
+| 属性 | 类型                | 默认值         |说明         |
+| :----- | :------------------ | :----------- |:----------- |
+| enable  | `boolean` | false | 启用排序 |
+| fields  | `array<string>` | - | 排序字段集合 |
+| mode  | `string` | client | 合计交互模式，可以选择client和server两个值 |
+| multiSort  | `boolean` | false | 多列排序 | -->
+
+
+## RowNumberOptions
+
+| 属性 | 类型                | 默认值         |说明         |
+| :----- | :------------------ | :----------- |:----------- |
+| enable  | `boolean` | false | 启用行号 |
+| heading  | `string`  | 序号 | 双击行事件 |
+| width  | `number` | 36 | 行号宽度 |
+
+## EditOptions
+
+| 属性 | 类型                | 默认值         |说明         |
+| :----- | :------------------ | :----------- |:----------- |
+| selectOnEditing  | `boolean` | false | 编辑时选中文本 |
+| editMode  | `string`  | cell | 单元格编辑cell或者行编辑row |
+
+
+## GroupOptions
+
+| 属性 | 类型                | 默认值         |说明         |
+| :----- | :------------------ | :----------- |:----------- |
+| enable  | `boolean` | false | 启用数据分组 |
+| groupFields  | `array<string>`  | [] | 行数据分组字段；多字段分组以英文逗号分隔 |
+| showGroupedColumn  | `boolean`  | true | 在DataGrid中显示被分组的列 |
+| showGroupPanel  | `boolean`  | false | 显示分组面板 |
+| showSummary  | `boolean`  | false | 启用合计行 |
+| summaryPosition  | `string`  | [] | 显示合计行位置,可以选择separate和merge-to-group两个方式 |
+| customSummaryStyle  | `function`  | () => {} | 自行分组合计行样式 |
+| customGroupRowStyle  | `function`  | () => {} | 自定义分组行样式 |
+| customGroupRow  | `function`  | () => {} | 自定义分组合计内容 |
+
+## DataGrid Event
+
+| 事件名 | 参数                | 说明         |
 | :----- | :------------------ | :----------- |
 | click-row  | `Function(index,dataItem)` | 点击行事件 |
 | double-click-row  | `Function(index,dataItem)` | 双击行事件 |
@@ -401,7 +490,7 @@ Data Grid 是展示数据的表格组件，提供分页展示数据，在单元
 | page-size-changed  | `Function(newPageSize)` | 每页数量切换事件 |
 
 
-## 组件实例API
+## DataGrid API
 有些场景下，需要主动触发组件API来实现数据或模板的更新，比如更新数据、更新列对象等，以下是data grid组件实例的方法
 | 方法名 | 参数                | 说明         |
 | :----- | :------------------ | :----------- |
@@ -410,7 +499,7 @@ Data Grid 是展示数据的表格组件，提供分页展示数据，在单元
 | selectItemByIds  | `dataItemIds: string[]` | 选中行 |
 | unSelectItemByIds  | `dataItemIds: string[]` | 取消选中行 |
 | clearSelection  | `无` | 清空选中行 |
-| updatePagination  | pageOptions: Partial<[PaginatonOptions](#分页属性pagination)> | 更新分页信息，多用于服务端分页 |
+| updatePagination  | pageOptions: Partial<[PaginatonOptions](#pagination)> | 更新分页信息，多用于服务端分页 |
 | endEditCell  | `无` | 结束单元格编辑 |
 | editDataItem  | `visualDataRow: VisualData` | 编辑行 |
 | removeDataItem  | `dataIndex: number` | 根据索引删除行 |
diff --git a/packages/ui-vue/docs/components/nav/index.md b/packages/ui-vue/docs/components/nav/index.md
index 1bf87ca82ff52fe60504ce0f9c676617bad3a1a8..5c4ebc31d6e8db611f8a632326b7e068de0ccdb2 100644
--- a/packages/ui-vue/docs/components/nav/index.md
+++ b/packages/ui-vue/docs/components/nav/index.md
@@ -55,8 +55,8 @@
 | :---------- | :--------------- | :----- | :-------------------------------------------------- |
 | maxNum      | `number`         | 99     | 显示未读信息的最大值，超过此数值会显示加号          |
 | horizontal  | `boolean`        | true   | 水平还是垂直方向显示，ture 水平展示，false 垂直展示 |
-| activeNavId | `string`         | true   | 指定当前激活的 id                                   |
-| navPicking  | `function`       | --     | 切换前事件,用来控制是否可以点击                     |
+| activeNavId | `string`         | --   | 指定当前激活的 id                                   |
+| navPicking  | `function`       | --     | 切换前事件属性,用来控制是否可以点击                     |
 | navData     | `Array<navItem>` |        | 导航数据                                            |
 
 ## navItem
diff --git a/packages/ui-vue/docs/components/textarea/index.md b/packages/ui-vue/docs/components/textarea/index.md
index 801085f141e3d0ac8cf93d4b2efbe5fd3c72318f..fec551ce71dd626f1c91d8a79d3b5e8ec468e2a8 100644
--- a/packages/ui-vue/docs/components/textarea/index.md
+++ b/packages/ui-vue/docs/components/textarea/index.md
@@ -20,4 +20,24 @@ Textarea 组件用来输入多行文本。
 {demos/textarea/disabled.vue}
 ```
 
-:::
\ No newline at end of file
+:::
+
+## 属性
+| 属性名 | 类型     | 默认值 | 说明     |
+| :----- | :------- | :----- | :------- |
+| autoHeight     | `boolean` | false     | 自动撑开高度 |
+| autofocus     | `boolean` | false     | 自动聚焦 |
+| autocomplete     | `boolean` | false     | 自动完成 |
+| allowUnlimtedWhenEmpty     | `boolean` | false     | 当设置文本长度为0，如果开启，支持无限制输入 |
+| disabled     | `boolean` | false     | 禁用 |
+| enableClear     | `boolean` | false     | 启用清空操作 |
+| id     | `string` | ''     | 组件标识 |
+| minLength     | `number` | 0     | 最小文本长度 |
+| maxLength     | `number` | 无     | 最大文本长度 |
+| modelValue     | `string` | ''     | 值，双向绑定 |
+| placeholder     | `string` | ''     | 背景文字 |
+| readonly     | `boolean` | false     | 只读 |
+| rows     | `number` | 无    | 行数 |
+| resizable     | `boolean` | false    | 允许拖拽调整大小 |
+| focusOnCreated     | `boolean` | false   | 初始化后自动聚焦 |
+| selectOnCreated     | `boolean` | false   | 初始化后自动选中 |
diff --git a/packages/ui-vue/docs/components/tree-grid/index.md b/packages/ui-vue/docs/components/tree-grid/index.md
index 5b2b68c43bd31b468448b9582eb0bd4b34967808..0a7f21f2aea20587f814b875812d975e0d10d3a8 100644
--- a/packages/ui-vue/docs/components/tree-grid/index.md
+++ b/packages/ui-vue/docs/components/tree-grid/index.md
@@ -222,7 +222,7 @@ Tree View 组件以树形式展现层级结构数据。
 
 :::
 
-## 单元格编辑
+<!-- ## 单元格编辑
 
 :::vdemo
 
@@ -230,7 +230,7 @@ Tree View 组件以树形式展现层级结构数据。
 {demos/tree-grid/edit_local_data.vue}
 ```
 
-:::
+::: -->
 
 ## 绑定数据
 
@@ -272,24 +272,41 @@ Tree View 组件以树形式展现层级结构数据。
 
 :::
 
-## 属性
+## TreeGrid
 
-| 属性名             | 类型                | 默认值                                                                              | 说明                       |
+| 属性            | 类型                | 默认值                                                                              | 说明                       |
 | :----------------- | :------------------ | :---------------------------------------------------------------------------------- | :------------------------- |
-| columns            | `Array<DataColumn>` | `[{field:'name'}]`                                                                  | 显示列                     |
-| data               | `Objecte`           | `[]`                                                                                | 绑定数据                   |
-| treeNodeIconsData  | `[Object, String]`  | `{}`                                                                                | 树节点图标数据             |
-| selectable         | `Boolean`           | `false`                                                                             | 树表是否支持可选状态       |
-| autoCheckChildren  | `Boolean`           | `true`                                                                              | 选中父节点会自动选中子节点 |
-| mergeCascadeValues | `Boolean`           | `true`                                                                              | 返回值展示父节点和子节点   |
+| data               | `Object`           | `[]`                                                                                | 绑定数据                   |
+| columns            | `Array<DataGridColumn>` | `[]`                                                            | 同data grid组件columns属性|
+| hierarchy          | [HierarchyOptions](#hierarchyoptions)            | `{ hasChildrenField: 'hasChildren', layerField: 'layer', parentIdField: 'parent' }` | 分级信息                   |
+| treeNodeIconsData  | [Object](#treenodeiconsdata)  | `{}`                                                                                | 树节点图标数据             |
 | showTreeNodeIcons  | `Boolean`           | `false`                                                                             | 是否显示图标集             |
 | showLines          | `Boolean`           | `false`                                                                             | 是否显示连接线             |
 | newDataItem        | `Function`          | `() => { }`                                                                         | 新增值                     |
-| lineColor          | `String`            | '#9399a0'                                                                           | 连接线颜色                 |
-| cellHeight         | `Number`            | 28                                                                                  | 单元格高度                 |
 | idField            | `String`            | 'id'                                                                                | 标识字段                   |
-| displayField       | `String`            | 'name'                                                                              | 显示字段                   |
-| hierarchy          | `Object`            | `{ hasChildrenField: 'hasChildren', layerField: 'layer', parentIdField: 'parent' }` | 分级信息                   |
+
+## TreeNodeIconsData
+| 属性 | 类型                | 默认值         |说明         |
+| :----- | :------------------ | :----------- |:-------------------------- |
+| fold  | `string` | -- | 折叠时图标class |
+| unfold  | `string` | -- | 展开时图标class |
+| leafnodes  | `string` | -- | 叶子节点图标class |
+
+## HierarchyOptions
+| 属性 | 类型                | 默认值         |说明         |
+| :----- | :------------------ | :----------- |:-------------------------- |
+| collapseField  | `string` | -- | 自定义的收折状态属性 |
+| hasChildrenField  | `string` | -- | 自定义的包含子节点状态属性 |
+| parentIdField  | `string` | -- | 自定义的父节点标识属性 |
+| cascadeOption  | [CascadeOptions](#cascadeoptions) | -- | 选中行级联配置 |
+
+## CascadeOptions
+| 属性 | 类型                | 默认值         |说明         |
+| :----- | :------------------ | :----------- |:-------------------------- |
+| autoCheckParent  | `boolean` | -- | 选中行自动级联父级 |
+| autoCheckChildren  | `string` | -- | 选中行自动级联子级 |
+| autoCancelParent  | `string` | -- | 自动取消父级，与前两个属性配合使用 |
+| selectionRange  | `string` | -- | 选择结果范围 |
 
 ## 事件