Common Components
On this page

使用 NPageLayout ​

通过 NPageLayout 可以快速构建出一个典型的页面布局, 该组件可以通过 slot 自定义布局, 也提供了默认的布局.

Slots ​

插槽名称说明类型
default默认插槽.v-slot:default
header顶部区域.v-slot:header
content内容部分, 如果可用高度不足会优先保证其高度占比.v-slot:content

不建议使用默认插槽, 使用具名插槽可以提供默认的布局优化

示例 ​

示例中使用了如下组件, 详细使用说明请看对应的组件文档.

  • NEasyForm: 上方的搜索表单使用的组件, 该组件可以根据配置创建带有展开收起功能的搜索表单.
  • NToolbar: 表格上方的工具栏使用的组件, 带有对表格列的配置功能. 也可以自定义工具栏的内容.
  • NEasyTable: 表格组件, 该组件可以根据配置创建带有分页, 排序, 筛选, 操作列等功能的表格.
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,
    initialValue: "输入框初始值"
  },
  { 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 }
]);

searchForm.search();

// 模拟请求
async function requestDataSource(pagination, filter, sorter) {
  console.info("分页参数: ", pagination);
  console.info("查询参数: ", filter);
  console.info("排序参数: ", sorter);
  const { current, pageSize } = pagination;
  const { data, total } = await requestPosts(current, pageSize, 1000);
  const { data: childrenData } = await requestPosts(current + 1, pageSize, 1000);

  data[0].children = childrenData;

  return { data, total };
}

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

      <NEasyTable
        :table-helper="tableHelper"
        :columns="columns"
        @change="onChange"
        :row-selection="rowSelection"
        show-number-column
      />
    </template>
  </NPageLayout>
</template>