Common Components
On this page

存储状态数据 ​

组件库内置状态存储, 用于存储一些可以提升用户体验的的数据, 例如表格调整后的列宽信息, 自定义的显示列信息等等. 默认情况下组件不会使用状态存储.

状态存储的数据是以 storageKey 属性作为键名存储的, 因此如果组件没有设置 storageKey 属性, 则无法使用状态存储.

当组件的 storageKey 属性不为空时会开启状态存储.

注意

storageKey 属性的值必须是唯一的, 否则会导致数据冲突.

禁用状态存储 ​

对于某些本身就使用了 storageKey 属性的组件, 如果不希望启用状态存储, 可以通过设置 disabled-storable 属性来禁用状态存储.

html
<Component disabled-storable />

保存/恢复状态数据 ​

组件库提供 StorageManager 类来管理状态数据, 通过 recovery/toString 可以恢复/保存状态数据.

保存状态数据 ​

状态数据可以在 页面卸载 (beforeunload) 或用户登出前保存.

toString 接口返回的数据可以存储在本地(例如 localStorage), 也可以通过 http 接口发送到服务器存储.

javascript
import { StorageManager } from "@nbicc/common-components";

// 保存状态存储的数据, 可以在页面卸载或用户登出前保存.
window.addEventListener("beforeunload", () => {
  const storagedData = StorageManager.toString();
  localStorage.setItem("__KEY__", storagedData);
});
恢复状态数据 ​

状态数据可以在 页面加载 (load) 或用户登录后恢复.

javascript
// 恢复状态存储的数据, 可以在页面加载或用户登录后恢复.
const storagedData = localStorage.getItem("__KEY__");
StorageManager.recovery(storagedData);

状态存储可用的组件 ​

组件支持存储的数据说明
Table列宽调整列宽时会自动记录列宽
Toolbar表格列设置窗口中的列宽/固定方向/是否隐藏

示例 ​

html
<template>
  <NPageLayout>
    <template #header>
      <NEasyForm
        v-model:data="searchForm.data"
        :fields="fields"
        @search="searchForm.search"
        @reset="searchForm.search"
      ></NEasyForm>
    </template>
    <template #content>
      <NToolbar
        storage-key="storage-example-toolbar"
        v-model:table-columns="columns"
        :disabled-column-keys="['id', 'operator']"
        :export-as-file="() => requestPosts(1, 1, 1000)"
      >
        <NButton type="primary">按钮</NButton>
        <template #secondary>
          <NButton type="primary" @click="() => requestPosts(1, 1, 1000)">
            按钮
            <template #icon>
              <FilterOutlined />
            </template>
          </NButton>
          <NButton type="primary" danger>按钮</NButton>
          <NButton type="primary" ghost>按钮</NButton>
        </template>
      </NToolbar>

      <NEasyTable
        storage-key="storage-example-easy-table"
        :table-helper="tableHelper"
        :columns="columns"
        :row-selection="rowSelection"
        :column-config="{ resizable: true }"
        @change="onChange"
      />
    </template>
  </NPageLayout>
</template>
javascript
import { ref } from "vue";
import { FilterOutlined } from "@ant-design/icons-vue";
import { useAntDesignVueTableHelper, FormItemControlType } from "@nbicc/common-components";
import { requestPosts } from "../mock";

// 初始化 table helper
const { tableHelper, columns, onChange, rowSelection, searchForm } = useAntDesignVueTableHelper(
  requestDataSource,
  [
    {
      title: "Id",
      dataIndex: "id",
      fixed: "left",
      ellipsis: true
    },
    { title: "Name", dataIndex: "name", sorter: true, ellipsis: true },
    { title: "Author", dataIndex: "author", ellipsis: true },
    { title: "Title", dataIndex: "title", ellipsis: true },
    {
      title: "Description",
      dataIndex: "description",
      ellipsis: true
    },
    { title: "Level", dataIndex: "level", ellipsis: true },
    { title: "Created At", dataIndex: "createdAt", ellipsis: true },
    { title: "Updated At", dataIndex: "updatedAt", ellipsis: true },
    {
      title: "Operator",
      dataIndex: "operator",
      ellipsis: true
    }
  ],
  "id"
);

const fields = ref([
  { name: "input", label: "输入框输入框输入框输入框", type: FormItemControlType.INPUT },
  { name: "input-number", label: "数字输入框", type: FormItemControlType.INPUT_NUMBER },
  [
    { name: "select", label: "下拉框", type: FormItemControlType.SELECT },
    {
      options: [
        {
          label: "option1",
          value: "option1"
        },
        { label: "option2", value: "option2" },
        { label: "option3", value: "option3" }
      ]
    }
  ],
  { name: "date-picker", label: "日期选择器", type: FormItemControlType.DATE_PICKER },
  { name: "time-picker", label: "时间选择器", type: FormItemControlType.TIME_PICKER },
  { name: "switch", label: "开关", type: FormItemControlType.SWITCH },
  [
    { name: "radio", label: "单选框", type: FormItemControlType.RADIO_GROUP },
    {
      options: [
        {
          label: "option1",
          value: "option1"
        },
        { label: "option2", value: "option2" },
        { label: "option3", value: "option3" }
      ]
    }
  ],
  [
    { name: "checkbox", label: "多选框", type: FormItemControlType.CHECKBOX_GROUP },
    {
      options: [
        {
          label: "option1",
          value: "option1"
        },
        { label: "option2", value: "option2" },
        { label: "option3", value: "option3" }
      ]
    }
  ],
  { name: "textarea", label: "文本域", type: FormItemControlType.TEXT_AREA },
  { name: "slider", label: "滑块", type: FormItemControlType.SLIDER },
  { name: "tree-select", label: "树选择器", type: FormItemControlType.TREE_SELECT },
  { name: "cascader", label: "级联选择器", type: FormItemControlType.CASCADER }
  // { name: "custom", label: "自定义", type: FormItemControlType.CUSTOM }
]);

// 立即加载数据
tableHelper.loadRecord(true);

// 模拟请求
function requestDataSource(pagination, filter, sorter) {
  console.info("分页参数: ", pagination);
  console.info("查询参数: ", filter);
  console.info("排序参数: ", sorter);
  const { current, pageSize } = pagination;
  return requestPosts(current, pageSize, 1000);
  // 测试空数据
  // return { data: [], total: 0 };
}