🔱: [client] sync upgrade with 9 commits [trident-sync]

perf: 完善文档，完善部分types perf: 优化d.ts类型 perf: 日期增加week、month、year、quarter类型 feat: resetCrudOptions 示例 feat: tabs快捷查询组件 fix: 行编辑支持多级表头 https://github.com/fast-crud/fast-crud/issues/143 perf: antdv 增加自定义表头示例 https://github.com/fast-crud/fast-crud/issues/141 perf: 表单下方按钮支持context https://github.com/fast-crud/fast-crud/issues/142
2026-05-16 13:17:29 +08:00 · 2023-03-09 19:24:01 +00:00
parent 76dd23174a
commit 52a167c647
100 changed files with 1465 additions and 585 deletions
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/BasisColumnMergePlugin";
-export function GetList(query) {
+export function GetList(query: any) {
  return request({
    url: apiPrefix + "/page",
    method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
  });
 }

-export function AddObj(obj) {
+export function AddObj(obj: any) {
  return request({
    url: apiPrefix + "/add",
    method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
  });
 }

-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
  return request({
    url: apiPrefix + "/update",
    method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
  });
 }

-export function DelObj(id) {
+export function DelObj(id: any) {
  return request({
    url: apiPrefix + "/delete",
    method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
  });
 }

-export function GetObj(id) {
+export function GetObj(id: any) {
  return request({
    url: apiPrefix + "/info",
    method: "get",
@@ -1,19 +1,19 @@
 import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";

-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
    return await api.GetList(query);
  };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
    form.id = row.id;
    return await api.UpdateObj(form);
  };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
    return await api.DelObj(row.id);
  };

-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
    return await api.AddObj(form);
  };

@@ -12,14 +12,15 @@
  </fs-page>
 </template>

-<script>
+<script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFs, UseFsProps } from "@fast-crud/fast-crud";
 export default defineComponent({
  name: "BasisColumnMergePlugin",
  setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
+    const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue });
    // 页面打开后获取列表数据
    onMounted(() => {
      crudExpose.doRefresh();
@@ -1,5 +1,6 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
  name: "BasisColumnMergePlugin",
  idGenerator: 0
 };
@@ -1,8 +1,14 @@
 <template>
  <fs-page>
+    <template #header>
+      <div class="title">列设置</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/toolbar.html#columnsfilter-mode">文档</a>
+      </div>
+    </template>
    <fs-crud ref="crudRef" v-bind="crudBinding">
      <template #actionbar-right>
-        <a-alert class="ml-1" type="warning" message="列设置可以禁用或者隐藏某字段勾选" />
+        <a-alert class="ml-1" type="warning" message="列设置可以禁用或者隐藏某字段勾选 ，-------> 点击右侧最后一个按钮查看效果" />
        <a-button @click="columnsSetToggleMode()"> 切换简单模式 </a-button>
      </template>
    </fs-crud>
@@ -37,9 +43,8 @@ export default defineComponent({
    });

    function columnsSetToggleMode() {
-      crudBinding.value.toolbar.columnsFilter.mode =
-        crudBinding.value.toolbar.columnsFilter.mode === "simple" ? "default" : "simple";
-      message.info("当前列设置组件的模式为：" + crudBinding.value.toolbar.columnsFilter.mode);
+      crudBinding.value.toolbar.columnsFilter.mode = crudBinding.value.toolbar.columnsFilter.mode === "simple" ? "default" : "simple";
+      message.info("点击列设置按钮查看效果，当前列设置组件的模式为：" + crudBinding.value.toolbar.columnsFilter.mode);
    }

    return {
@@ -2,6 +2,9 @@
  <fs-page>
    <template #header>
      <div class="title">动态计算-更多测试</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/compute.html">文档</a>
+      </div>
    </template>
    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
  </fs-page>
@@ -177,9 +177,7 @@ export default function ({ expose }) {
                },
                async asyncFn(watchValue) {
                  message.info("监听switch,触发远程获取options");
-                  const url = watchValue
-                    ? "/mock/dicts/OpenStatusEnum?remote"
-                    : "/mock/dicts/moreOpenStatusEnum?remote";
+                  const url = watchValue ? "/mock/dicts/OpenStatusEnum?remote" : "/mock/dicts/moreOpenStatusEnum?remote";
                  return await requestForMock({ url });
                }
              })
@@ -6,7 +6,7 @@
        <fs-icon icon="ion:apps-sharp" :spin="true" />
      </div>
      <div class="more">
-        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/compute.html">帮助说明</a>
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/compute.html">文档</a>
      </div>
    </template>
    <fs-crud ref="crudRef" v-bind="crudBinding">
@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/FsCrudFirst";
+export function GetList(query: any) {
+  return request({
+    url: apiPrefix + "/page",
+    method: "get",
+    data: query
+  });
+}
+
+export function AddObj(obj: any) {
+  return request({
+    url: apiPrefix + "/add",
+    method: "post",
+    data: obj
+  });
+}
+
+export function UpdateObj(obj: any) {
+  return request({
+    url: apiPrefix + "/update",
+    method: "post",
+    data: obj
+  });
+}
+
+export function DelObj(id: any) {
+  return request({
+    url: apiPrefix + "/delete",
+    method: "post",
+    params: { id }
+  });
+}
+
+export function GetObj(id: any) {
+  return request({
+    url: apiPrefix + "/info",
+    method: "get",
+    params: { id }
+  });
+}
@@ -0,0 +1,54 @@
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import * as api from "./api";
+export default function ({ crudExpose, customValue }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    //自定义变量返回
+    customExport: {},
+    crudOptions: {
+      // 自定义crudOptions配置
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      //两个字段
+      columns: {
+        name: {
+          title: "姓名",
+          type: "text",
+          search: { show: true },
+          column: {
+            resizable: true,
+            width: 200
+          }
+        },
+        type: {
+          title: "类型",
+          type: "dict-select",
+          dict: dict({
+            data: [
+              { value: 1, label: "开始", color: "green" },
+              { value: 0, label: "停止", color: "red" }
+            ]
+          })
+        }
+      }
+    }
+  };
+}
@@ -1,105 +1,46 @@
 <template>
  <fs-page>
+    <template #header>
+      <div class="title">第一个crud</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/start/first.html">文档</a>
+      </div>
+    </template>
    <fs-crud ref="crudRef" v-bind="crudBinding" />
  </fs-page>
 </template>

-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { dict, useCrud } from "@fast-crud/fast-crud";
-import { useExpose } from "@fast-crud/fast-crud";
-import _ from "lodash-es";
-
-//此处为crudOptions配置
-const createCrudOptions = function ({ expose }) {
-  //本地模拟后台crud接口方法 ----开始
-  const records = [{ id: 1, name: "Hello World", type: 1 }];
-  const pageRequest = async (query) => {
-    return {
-      records,
-      currentPage: 1,
-      pageSize: 20,
-      total: records.length
-    };
-  };
-  const editRequest = async ({ form, row }) => {
-    const target = _.find(records, (item) => {
-      return row.id === item.id;
-    });
-    _.merge(target, form);
-    return target;
-  };
-  const delRequest = async ({ row }) => {
-    _.remove(records, (item) => {
-      return item.id === row.id;
-    });
-  };
-  const addRequest = async ({ form }) => {
-    const maxRecord = _.maxBy(records, (item) => {
-      return item.id;
-    });
-    form.id = (maxRecord?.id || 0) + 1;
-    records.push(form);
-    return form;
-  };
-  //本地模拟后台crud接口方法 -----结束
-
-  return {
-    crudOptions: {
-      request: {
-        pageRequest,
-        addRequest,
-        editRequest,
-        delRequest
-      },
-      columns: {
-        name: {
-          title: "姓名",
-          type: "text",
-          search: { show: true },
-          column: {
-            resizable: true,
-            width: 200
-          }
-        },
-        type: {
-          title: "类型",
-          type: "dict-select",
-          dict: dict({
-            data: [
-              { value: 1, label: "开始" },
-              { value: 0, label: "停止" }
-            ]
-          })
-        }
-      }
-    }
-  };
-};
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";

 //此处为组件定义
 export default defineComponent({
  name: "FsCrudFirst",
  setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    // 演示自定义变量传递, 将会传递给createCrudOptions
+    const customValue: any = {};
+
+    // // crud组件的ref
+    // const crudRef: Ref = ref();
+    // // crud 配置的ref
+    // const crudBinding: Ref<CrudBinding> = ref();
+    // // 暴露的方法
+    // const { crudExpose } = useExpose({ crudRef, crudBinding });
+    // // 你的crud配置
+    // const { crudOptions, customExport } = createCrudOptions({ crudExpose, customValue });
+    // // 初始化crud配置
+    // const { resetCrudOptions, appendCrudBinding } = useCrud({ crudExpose, crudOptions });
+
+    //  =======以上为fs的初始化代码=========
+    //  =======你可以简写为下面这一行========
+    const { crudRef, crudBinding, crudExpose, customExport } = useFs({ createCrudOptions, customValue });

    // 页面打开后获取列表数据
    onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
    });
-
    return {
      crudBinding,
      crudRef
@@ -0,0 +1,22 @@
+// @ts-ignore
+import mockUtil from "/src/mock/base";
+const options: any = {
+  name: "FsCrudFirst",
+  idGenerator: 0
+};
+const list = [
+  {
+    name: "张三",
+    type: 1
+  },
+  {
+    name: "李四",
+    type: 0
+  },
+  {
+    name: "王五"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;
@@ -0,0 +1,119 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">HelloWorld</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/start/integration.html">文档</a>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted } from "vue";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, useCrud, useFs, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import _ from "lodash-es";
+
+//此处为crudOptions配置
+const createCrudOptions = function ({ crudOptions, customValue }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  //本地模拟后台crud接口方法 ----开始
+  const records = [{ id: 1, name: "Hello World", type: 1 }];
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return {
+      records,
+      currentPage: 1,
+      pageSize: 20,
+      total: records.length
+    };
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    const target = _.find(records, (item) => {
+      return row.id === item.id;
+    });
+    _.merge(target, form);
+    return target;
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    _.remove(records, (item) => {
+      return item.id === row.id;
+    });
+  };
+  const addRequest = async ({ form }: AddReq) => {
+    const maxRecord = _.maxBy(records, (item) => {
+      return item.id;
+    });
+    form.id = (maxRecord?.id || 0) + 1;
+    records.push(form);
+    return form;
+  };
+  //本地模拟后台crud接口方法 -----结束
+
+  return {
+    //自定义变量返回
+    customExport: {},
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        name: {
+          title: "姓名",
+          type: "text",
+          search: { show: true },
+          column: {
+            resizable: true,
+            width: 200
+          }
+        },
+        type: {
+          title: "类型",
+          type: "dict-select",
+          dict: dict({
+            data: [
+              { value: 1, label: "开始" },
+              { value: 0, label: "停止" }
+            ]
+          })
+        }
+      }
+    }
+  };
+};
+
+//此处为组件定义
+export default defineComponent({
+  name: "FsCrudHelloWorld",
+  setup() {
+    // 演示自定义变量传递, 将会传递给createCrudOptions
+    const customValue: any = {};
+
+    // // crud组件的ref
+    // const crudRef: Ref = ref();
+    // // crud 配置的ref
+    // const crudBinding: Ref<CrudBinding> = ref();
+    // // 暴露的方法
+    // const { crudExpose } = useExpose({ crudRef, crudBinding });
+    // // 你的crud配置
+    // const { crudOptions, customExport } = createCrudOptions({ crudExpose, customValue });
+    // // 初始化crud配置
+    // const { resetCrudOptions, appendCrudBinding } = useCrud({ crudExpose, crudOptions });
+
+    //  =======以上为fs的初始化代码=========
+    //  =======你可以简写为下面这一行========
+    const { crudRef, crudBinding, crudExpose, customExport } = useFs({ createCrudOptions, customValue });
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>
@@ -2,7 +2,9 @@
  <fs-page>
    <template #header>
      <div class="title">CRUD示例【国际化】</div>
-      <div class="more"><a-button @click="showDemo">更多</a-button></div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/start/i18n.html">文档</a>
+      </div>
    </template>
    <fs-crud ref="crudRef" v-bind="crudBinding">
      <template #actionbar-right>
@@ -40,13 +42,9 @@ export default defineComponent({
      expose.doRefresh();
    });

-    function showDemo() {
-      message("演示按钮");
-    }
    return {
      crudBinding,
-      crudRef,
-      showDemo
+      crudRef
    };
  }
 });
@@ -1,5 +1,7 @@
 import * as api from "./api";
 import { dict } from "@fast-crud/fast-crud";
+import { computed } from "vue";
+
 export default function ({ crudExpose }) {
  const pageRequest = async (query) => {
    return await api.GetList(query);
@@ -15,6 +17,17 @@ export default function ({ crudExpose }) {
  const addRequest = async ({ form }) => {
    return await api.AddObj(form);
  };
+  let cityDictRef = dict({
+    value: "id",
+    label: "text",
+    data: [
+      { id: "sz", text: "深圳", color: "success" },
+      { id: "gz", text: "广州", color: "blue" },
+      { id: "bj", text: "北京" },
+      { id: "wh", text: "武汉" },
+      { id: "sh", text: "上海" }
+    ]
+  });
  return {
    crudOptions: {
      container: {
@@ -26,6 +39,16 @@ export default function ({ crudExpose }) {
        editRequest,
        delRequest
      },
+      tabs: {
+        name: "city",
+        show: true,
+        type: "card",
+        value: "id",
+        label: "text",
+        options: computed(() => {
+          return cityDictRef.data;
+        })
+      },
      columns: {
        id: {
          title: "ID",
@@ -47,17 +70,7 @@ export default function ({ crudExpose }) {
          title: "城市",
          type: "dict-select",
          search: { show: true },
-          dict: dict({
-            value: "id",
-            label: "text",
-            data: [
-              { id: "sz", text: "深圳", color: "success" },
-              { id: "gz", text: "广州", color: "blue" },
-              { id: "bj", text: "北京" },
-              { id: "wh", text: "武汉" },
-              { id: "sh", text: "上海" }
-            ]
-          })
+          dict: cityDictRef
        },
        radio: {
          title: "单选",
@@ -1,5 +1,11 @@
 <template>
  <fs-page class="page-layout-card">
+    <template #header>
+      <div class="title">Card布局</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/layout.html">文档</a>
+      </div>
+    </template>
    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
  </fs-page>
 </template>
@@ -42,5 +48,9 @@ export default defineComponent({
 <style lang="less">
 .page-layout-card {
  background-color: #eee;
+
+  .fs-page-header {
+    background-color: #fff;
+  }
 }
 </style>
@@ -22,6 +22,11 @@ export default function ({ crudExpose }) {
      container: {
        is: shallowRef(CustomLayout) //可以将自定义布局组件全局注册，这里只需要配置name即可
      },
+      tabs: {
+        show: true,
+        name: "city",
+        type: "card"
+      },
      request: {
        pageRequest,
        addRequest,
@@ -48,7 +53,7 @@ export default function ({ crudExpose }) {
        city: {
          title: "城市",
          type: "dict-select",
-          search: { show: false },
+          search: { show: true },
          dict: dict({
            value: "id",
            label: "text",
@@ -9,6 +9,8 @@
    <div class="layout-top">
      <!-- ↓↓↓↓↓  关键插槽：动作条  ↓↓↓↓ -->
      <slot name="actionbar"></slot>
+
+      <slot name="tabs"></slot>
      <!-- ↓↓↓↓↓  上翻页条  ↓↓↓↓ -->
      <slot name="pagination"></slot>
    </div>
@@ -70,5 +72,10 @@ export default defineComponent({
    text-align: right;
    padding: 5px 10px 5px 10px;
  }
+
+  .fs-tabs-filter {
+    flex: 1;
+    margin-left: 10px;
+  }
 }
 </style>
@@ -1,17 +1,15 @@
 <template>
  <fs-page class="page-layout-custom">
    <template #header>
-      <div class="title">自定义布局</div>
+      <div class="title">
+        自定义布局
+        <span class="sub">通过自定义container.is可以自定义布局，甚至可以支持上下两个翻页条</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/layout.html">文档</a>
+      </div>
    </template>
-    <fs-crud ref="crudRef" v-bind="crudBinding">
-      <template #actionbar-right>
-        <a-alert
-          class="ml-1"
-          type="info"
-          message="通过自定义container.is可以自定义布局，甚至可以支持上下两个翻页条 -------->"
-        />
-      </template>
-    </fs-crud>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
  </fs-page>
 </template>

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/BasisValueChange";
+export function GetList(query: any) {
+  return request({
+    url: apiPrefix + "/page",
+    method: "get",
+    data: query
+  });
+}
+
+export function AddObj(obj: any) {
+  return request({
+    url: apiPrefix + "/add",
+    method: "post",
+    data: obj
+  });
+}
+
+export function UpdateObj(obj: any) {
+  return request({
+    url: apiPrefix + "/update",
+    method: "post",
+    data: obj
+  });
+}
+
+export function DelObj(id: any) {
+  return request({
+    url: apiPrefix + "/delete",
+    method: "post",
+    params: { id }
+  });
+}
+
+export function GetObj(id: any) {
+  return request({
+    url: apiPrefix + "/info",
+    method: "get",
+    params: { id }
+  });
+}
@@ -0,0 +1,54 @@
+import * as api from "./api";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    output: {},
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        switch: {
+          title: "开关",
+          type: "dict-switch",
+          dict: dict({
+            data: [
+              { value: true, label: "开启" },
+              { value: false, label: "关闭" }
+            ]
+          })
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,53 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">
+        重置CrudOptions
+        <span class="sub">重置CrudOptions,演示2秒后追加一个字段</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/use.html">文档</a>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs, UseFsProps } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud.js";
+import _ from "lodash-es";
+export default defineComponent({
+  name: "BasisReset",
+  setup() {
+    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
+    const { crudBinding, crudRef, crudExpose, customExport, crudOptions, resetCrudOptions, appendBindingOptions } = useFs({ createCrudOptions, customValue } as UseFsProps);
+
+    setTimeout(() => {
+      //合并新的crudOptions
+      const newOptions = _.merge(crudOptions, {
+        columns: {
+          text: {
+            title: "追加字段",
+            type: "text"
+          }
+        }
+      });
+      //重置crudBinding
+      resetCrudOptions(newOptions);
+      crudExpose.doRefresh();
+    }, 2000);
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>
@@ -0,0 +1,23 @@
+// @ts-ignore
+import mockUtil from "/src/mock/base";
+const options: any = {
+  name: "BasisValueChange",
+  idGenerator: 0
+};
+const list = [
+  {
+    switch: true,
+    text: "1111"
+  },
+  {
+    switch: true,
+    text: "2222"
+  },
+  {
+    switch: true,
+    text: "3333"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;
@@ -2,6 +2,9 @@
  <fs-page>
    <template #header>
      <div class="title">ValueChange</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/columns.html#valuebuilder与valueresolve">文档</a>
+      </div>
    </template>
    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
  </fs-page>