feat(element): update array-table component & doc (#1862)

alibaba · Jul 22, 2021 · f98129a · f98129a
1 parent e0fc3c6
commit f98129a
Show file tree

Hide file tree

Showing 7 changed files with 395 additions and 82 deletions.
diff --git a/packages/element/docs/demos/guide/array-table/effects-markup-schema.vue b/packages/element/docs/demos/guide/array-table/effects-markup-schema.vue
@@ -17,16 +17,12 @@
             name="column1"
             x-component="ArrayTableColumn"
             :x-component-props="{ width: 80, title: 'Index' }"
-            ><SchemaVoidField
-              x-decorator="FormItem"
-              x-component="ArrayTableIndex"
-            />
+            ><SchemaVoidField x-component="ArrayTableIndex" />
           </SchemaVoidField>
           <SchemaVoidField
             name="column2"
             x-component="ArrayTableColumn"
             :x-component-props="{
-              prop: 'a1',
               title: '显隐->A2',
               width: 100,
             }"
@@ -40,7 +36,7 @@
           <SchemaVoidField
             x-component="ArrayTableColumn"
             name="column3"
-            :x-component-props="{ prop: 'a2', title: 'A2', width: 200 }"
+            :x-component-props="{ title: 'A2', width: 200 }"
           >
             <SchemaStringField
               x-decorator="FormItem"
@@ -51,11 +47,10 @@
           <SchemaVoidField
             name="column4"
             x-component="ArrayTableColumn"
-            :x-component-props="{ prop: 'a3', title: 'A3' }"
+            :x-component-props="{ title: 'A3' }"
           >
             <SchemaStringField
               name="a3"
-              :required="true"
               x-decorator="FormItem"
               x-component="Input"
             />

diff --git a/packages/element/docs/demos/guide/array-table/markup-schema.vue b/packages/element/docs/demos/guide/array-table/markup-schema.vue
@@ -5,6 +5,9 @@
         name="array"
         x-decorator="FormItem"
         x-component="ArrayTable"
+        :x-component-props="{
+          pagination: { pageSize: 10 },
+        }"
       >
         <SchemaObjectField>
           <SchemaVoidField
@@ -28,7 +31,7 @@
           </SchemaVoidField>
           <SchemaVoidField
             x-component="ArrayTableColumn"
-            :x-component-props="{ prop: 'a2', title: 'A2', width: 200 }"
+            :x-component-props="{ title: 'A2', width: 200 }"
           >
             <SchemaStringField
               x-decorator="FormItem"
@@ -39,7 +42,7 @@
           </SchemaVoidField>
           <SchemaVoidField
             x-component="ArrayTableColumn"
-            :x-component-props="{ prop: 'a3', title: 'A3' }"
+            :x-component-props="{ title: 'A3' }"
           >
             <SchemaStringField
               name="a3"
@@ -54,7 +57,6 @@
               title: 'Operations',
               prop: 'operations',
               width: 200,
-              fixed: 'right',
             }"
           >
             <SchemaVoidField x-component="FormItem">
@@ -68,6 +70,22 @@
       </SchemaArrayField>
     </SchemaField>
     <Submit @submit="log">提交</Submit>
+    <Button
+      @click="
+        () => {
+          form.setInitialValues({
+            array: range(100000),
+          })
+        }
+      "
+    >
+      加载10W条超大数据
+    </Button>
+    <Alert
+      :style="{ marginTop: '10px' }"
+      title="注意：开启formily插件的页面，因为后台有数据通信，会占用浏览器算力，最好在无痕模式(无formily插件)下测试"
+      type="warning"
+    />
   </FormProvider>
 </template>
 
@@ -88,6 +106,7 @@ import {
   Input,
   Editable,
 } from '@formily/element'
+import { Button, Alert } from 'element-ui'
 
 const fields = createSchemaField({
   components: {
@@ -106,7 +125,7 @@ const fields = createSchemaField({
 })
 
 export default {
-  components: { FormProvider, Submit, ...fields },
+  components: { FormProvider, Submit, Button, Alert, ...fields },
   data() {
     const form = createForm()
     return {
@@ -117,6 +136,11 @@ export default {
     log(...v) {
       console.log(...v)
     },
+    range(count) {
+      return Array.from(new Array(count)).map((_, key) => ({
+        aaa: key,
+      }))
+    },
   },
 }
 </script>
diff --git a/packages/element/src/array-base/index.ts b/packages/element/src/array-base/index.ts
@@ -42,17 +42,15 @@ export interface IArrayBaseContext {
 
 const ArrayBaseSymbol: InjectionKey<IArrayBaseContext> =
   Symbol('ArrayBaseContext')
-const ItemSymbol: InjectionKey<{
-  index: Ref<number>
-}> = Symbol('ItemContext')
+const ItemSymbol: InjectionKey<Ref<number>> = Symbol('ItemContext')
 
 export const useArray = () => {
   return inject(ArrayBaseSymbol, null)
 }
 
 export const useIndex = (index?: number) => {
-  const ctx = inject(ItemSymbol, null)
-  return ctx ? ctx.index : ref(index)
+  const indexRef = inject(ItemSymbol)
+  return indexRef ?? ref(index)
 }
 
 export const useKey = () => {
@@ -100,7 +98,8 @@ export const ArrayBaseItem = defineComponent({
   name: 'ArrayBaseItem',
   props: ['index'],
   setup(props: IArrayBaseItemProps, { slots }) {
-    provide(ItemSymbol, toRefs(props))
+    const { index } = toRefs(props)
+    provide(ItemSymbol, index)
     return () => {
       return h(Fragment, {}, slots)
     }
@@ -143,8 +142,8 @@ export const ArrayBaseIndex = defineComponent({
   name: 'ArrayBaseIndex',
   setup(props, { attrs }) {
     const index = useIndex()
-    return () =>
-      h(
+    return () => {
+      return h(
         'span',
         {
           attrs,
@@ -153,6 +152,7 @@ export const ArrayBaseIndex = defineComponent({
           default: () => [`#${index.value + 1}.`],
         }
       )
+    }
   },
 })