perf: table-select element增加radio列

Closes https://github.com/fast-crud/fast-crud/issues
fast-crud · Feb 9, 2024 · b56b5df · b56b5df
1 parent c768a50
commit b56b5df
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 24 deletions.
diff --git a/packages/fast-admin/fs-admin-antdv4 b/packages/fast-admin/fs-admin-antdv4
diff --git a/packages/fast-crud/src/components/extends/fs-table-select.vue b/packages/fast-crud/src/components/extends/fs-table-select.vue
@@ -39,7 +39,7 @@
   </div>
 </template>
 <script lang="tsx" setup>
-import { Dict, useFs, useMerge, useUi } from "../../use";
+import { Dict, useCompute, useFs, useMerge, useUi } from "../../use";
 import { computed, nextTick, ref, Ref, watch } from "vue";
 import { CreateCrudOptions, DynamicallyCrudOptions } from "../../d";
 import _ from "lodash-es";
@@ -249,6 +249,7 @@ const override: DynamicallyCrudOptions = computed(() => {
     getPageData() {
       return crudBinding.value.data;
     },
+    useCompute: useCompute,
     multiple: props.multiple,
     selectedRowKeys,
     onSelectedKeysChanged: async (changed) => {

diff --git a/packages/fast-crud/src/components/render/fs-component-render.tsx b/packages/fast-crud/src/components/render/fs-component-render.tsx
@@ -123,34 +123,35 @@ export default defineComponent({
       }
 
       const modelValue = props.modelValue ?? (ui.type === "antdv" ? undefined : null);
+      const onUpdateModelValueName = "onUpdate:" + vModel.name;
       const attrs = {
         ref: targetRef,
         // scope: props.scope,
         // fix element display false bug
         [vModel.name]: modelValue,
-        ...props.props
-      };
-      attrs["onUpdate:" + vModel.name] = (value: any) => {
-        if (value) {
-          if (vModel.trim) {
-            value = value.trim();
-          }
-          if (vModel.number) {
-            const tmp = Number(value);
-            //判断tmp是否NaN
-            if (isNaN(tmp)) {
-            } else {
-              value = tmp;
+        [onUpdateModelValueName]: (value: any) => {
+          if (value) {
+            if (vModel.trim) {
+              value = value.trim();
+            }
+            if (vModel.number) {
+              const tmp = Number(value);
+              //判断tmp是否NaN
+              if (isNaN(tmp)) {
+              } else {
+                value = tmp;
+              }
             }
           }
-        }
-        if (vModel.transform) {
-          value = vModel.transform(value);
-        }
-        if (value === undefined && props.undefineToNull) {
-          value = null;
-        }
-        ctx.emit("update:modelValue", value);
+          if (vModel.transform) {
+            value = vModel.transform(value);
+          }
+          if (value === undefined && props.undefineToNull) {
+            value = null;
+          }
+          ctx.emit("update:modelValue", value);
+        },
+        ...props.props
       };
 
       const events: {

diff --git a/packages/ui/ui-element/src/element.tsx b/packages/ui/ui-element/src/element.tsx
@@ -60,7 +60,7 @@ import {
 // @ts-ignore
 import _, { isFunction } from "lodash-es";
 import { ElDialog, useFormItem } from "element-plus";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 export type ElementUiProvider = {
   Notification: any;
@@ -469,6 +469,7 @@ export class Element implements UiInterface {
       }
     },
     buildSelectionCrudOptions(req) {
+      const { compute } = req.useCompute();
       function getCrossPageSelected(curSelectedIds: any[]) {
         const rowKey: any = req.getRowKey();
         const data = req.getPageData();
@@ -522,10 +523,45 @@ export class Element implements UiInterface {
           const selectedKeys = [changed[rowKey]];
           req.onSelectedKeysChanged(selectedKeys);
         };
+        const modelValue = computed(() => {
+          const value = req.selectedRowKeys.value.length > 0 ? req.selectedRowKeys.value[0] : null;
+          return value;
+        });
         return {
           table: {
             highlightCurrentRow: true,
             onCurrentChange: onCurrentChange
+          },
+          columns: {
+            $selected: {
+              form: { show: false },
+              column: {
+                align: "center",
+                width: "55px",
+                order: -9999,
+                component: {
+                  name: "el-radio",
+                  label: compute((ctx) => {
+                    if (ctx.form) {
+                      return ctx.form[req.getRowKey()];
+                    }
+                  }),
+                  props: {
+                    modelValue: modelValue
+                  },
+                  slots: {
+                    default() {
+                      return "";
+                    }
+                  }
+                },
+                conditionalRender: {
+                  match() {
+                    return false;
+                  }
+                }
+              }
+            }
           }
         };
       }

diff --git a/packages/ui/ui-interface/src/ui-interface.ts b/packages/ui/ui-interface/src/ui-interface.ts
@@ -221,6 +221,7 @@ export type TableSelectionReq = {
   getRowKey?: () => any;
   getPageData?: () => any[];
   multiple: boolean;
+  useCompute: () => { compute: any; asyncCompute };
   selectedRowKeys: Ref<any[]>;
   onSelectedKeysChanged: (selectedRowKeys: any[]) => void;
 };