gi-component

Appearance

PageLayout 页面布局 ​

该组件是一个页面布局组件，用于快速生成一个页面布局，扩展性强，适合各种场景使用

基础用法 ​

暂无数据
  • 1
共 0 条
查看代码
vue
<template>
  <gi-page-layout bordered>
    <template #tool>
      <el-space>
        <el-button type="primary">新增</el-button>
        <el-button type="primary">导出</el-button>
      </el-space>
    </template>
    <Table></Table>
  </gi-page-layout>
</template>

<script setup lang="ts">
import Table from './components/Table.vue'
</script>

<style lang="scss" scoped></style>

搜索 ​

姓名
手机号
数量
评分
兴趣
请选择兴趣
日期
时间
暂无数据
  • 1
共 0 条
查看代码
vue
<template>
  <gi-page-layout bordered>
    <template #header>
      <Search></Search>
    </template>
    <Table></Table>
  </gi-page-layout>
</template>

<script setup lang="ts">
import Search from '@docs/_components/Search.vue'
import Table from './components/Table.vue'
</script>

<style lang="scss" scoped></style>

搜索 + 按钮 ​

姓名
手机号
数量
评分
兴趣
请选择兴趣
日期
时间
暂无数据
  • 1
共 0 条
查看代码
vue
<template>
  <gi-page-layout bordered>
    <template #header>
      <Search></Search>
    </template>
    <template #tool>
      <el-space>
        <el-button type="primary">新增</el-button>
        <el-button type="primary">导出</el-button>
      </el-space>
    </template>
    <Table></Table>
  </gi-page-layout>
</template>

<script setup lang="ts">
import Search from '@docs/_components/Search.vue'
import Table from './components/Table.vue'
</script>

<style lang="scss" scoped></style>

左侧树 ​

总公司
行政部
行政综合组
后勤保障组
技术部
前端开发组
Web前端小组
移动端小组
后端开发组
API开发小组
数据库小组
测试组
市场部
品牌推广组
渠道拓展组
分公司
销售一部
华东区域组
华南区域组
销售二部
华北区域组
西部区域组
客服部
售前咨询组
售后服务组
姓名
手机号
数量
评分
兴趣
请选择兴趣
日期
时间
暂无数据
  • 1
共 0 条
查看代码
vue
<template>
  <gi-page-layout bordered :size="160" :style="{ height: '500px' }">
    <template #left>
      <Tree></Tree>
    </template>
    <template #header>
      <Search></Search>
    </template>
    <Table></Table>
  </gi-page-layout>
</template>

<script setup lang="ts">
import Search from '@docs/_components/Search.vue'
import Table from '@docs/_components/Table.vue'
import Tree from '@docs/_components/Tree.vue'
</script>

<style lang="scss" scoped></style>

布局嵌套布局 ​

总公司
行政部
行政综合组
后勤保障组
技术部
前端开发组
Web前端小组
移动端小组
后端开发组
API开发小组
数据库小组
测试组
市场部
品牌推广组
渠道拓展组
分公司
销售一部
华东区域组
华南区域组
销售二部
华北区域组
西部区域组
客服部
售前咨询组
售后服务组
暂无数据
  • 1
共 0 条
查看代码
vue
<template>
  <gi-page-layout bordered :style="{ height: '500px' }" :header-style="{ padding: '8px 0 0', borderBottom: 'none' }"
    :body-style="{ padding: 0 }">
    <template #header>
      <gi-tabs v-model="activeName" :options="options">
        <template #extra>
          <el-space wrap>
            <el-button type="primary">新增</el-button>
            <el-button type="danger">删除</el-button>
          </el-space>
        </template>
      </gi-tabs>
    </template>
    <gi-page-layout :size="150">
      <template #left>
        <Tree></Tree>
      </template>
      <Table></Table>
    </gi-page-layout>
  </gi-page-layout>
</template>

<script setup lang="ts">
import type { TabsOptionItem } from 'gi-component'
import Table from '@docs/_components/Table.vue'
import Tree from '@docs/_components/Tree.vue'
import { ref } from 'vue'

const activeName = ref('1')
const options: TabsOptionItem[] = [
  { label: '选项1', name: '1' },
  { label: '选项2', name: '2' },
  { label: '选项3', name: '3' }
]
</script>

API ​

Props ​

属性名说明类型默认值
size左侧面板宽度/占比SplitterPanelProps['size']270
bordered是否显示外边框booleanfalse
collapse是否可以折叠booleantrue
leftStyle左侧区域自定义样式CSSProperties{}
headerStyle头部区域自定义样式CSSProperties{}
toolStyle操作栏区域自定义样式CSSProperties{}
bodyStyle内容区域自定义样式CSSProperties{}

Slots ​

名称说明
default自定义内容
header自定义头部
left自定义左侧
tool自定义操作栏

提示：只有在插槽 left 存在时才会渲染可折叠的左侧区域与折叠按钮。若 collapse 设为 false，左侧区域固定展示。