Skip to main content

Vue UI

一、Reference List

（一）数据展示

Table 表格

基础用法

<template>
  <oio-table :data="tableData">
    <oio-column label="名称" field="name" />
    <oio-column label="描述" field="description" />
  </oio-table>
</template>
<script lang="ts">
import { OioColumn, OioTable } from '@kunlun/dependencies';
import { defineComponent, ref } from 'vue';

interface DataItem {
  name: string;
  description: string;
}

export default defineComponent({
  components: {
    OioTable,
    OioColumn
  },
  props: {},
  setup(props) {
    const tableData = ref<DataItem[]>([]);

    for (let i = 1; i <= 50; i++) {
      tableData.value.push({
        name: `名称${i}`,
        description: `这是一段描述 ${i}`
      });
    }

    return {
      tableData
    };
  }
});
</script>

固定表头

<template>
  <oio-table :data="tableData" height="100%">
    <oio-column label="名称" field="name" />
    <oio-column label="描述" field="description" />
  </oio-table>
</template>

分组表头

<template>
  <oio-table :data="tableData" height="100%">
    <oio-column label="名称" field="name" />
    <oio-column label="描述" field="description" />
    <oio-colgroup label="地址">
      <oio-column label="省" field="address.province" />
      <oio-column label="市" field="address.city" />
      <oio-column label="区" field="address.district" />
    </oio-colgroup>
  </oio-table>
</template>
<script lang="ts">
import { OioColgroup, OioColumn, OioTable } from '@kunlun/dependencies';
import { defineComponent, ref } from 'vue';

interface DataItem {
  name: string;
  description: string;
  address: {
    province: string;
    city: string;
    district: string;
  };
}

export default defineComponent({
  components: {
    OioTable,
    OioColumn,
    OioColgroup
  },
  props: {},
  setup(props) {
    const tableData = ref<DataItem[]>([]);

    for (let i = 1; i <= 50; i++) {
      tableData.value.push({
        name: `名称${i}`,
        description: `这是一段描述 ${i}`,
        address: {
          province: '省',
          city: '市',
          district: '区'
        }
      });
    }

    return {
      tableData
    };
  }
});
</script>

冻结操作列

<template>
  <div style="width: 1000px; height: 800px">
    <oio-table :data="tableData" height="100%">
      <oio-column label="名称" field="name" width="200px" />
      <oio-column label="描述" field="description" min-width="300px" />
      <oio-column label="性别" field="sex" min-width="300px" />
      <oio-column label="年龄" field="age" min-width="300px" />
      <oio-column label="操作" fixed="right" width="200px">
        <template #default>
          <div style="display: flex; column-gap: 16px">
            <oio-button type="link">操作1</oio-button>
            <oio-button type="link">操作2</oio-button>
          </div>
        </template>
      </oio-column>
    </oio-table>
  </div>
</template>

可调整列宽

<template>
  <oio-table :data="tableData" height="100%" resizable>
    <oio-column label="名称" field="name" />
    <oio-column label="描述" field="description" />
  </oio-table>
</template>

全边框样式和斑马纹

<template>
  <oio-table :data="tableData" height="100%" border="full" stripe>
    <oio-column label="名称" field="name" />
    <oio-column label="描述" field="description" />
  </oio-table>
</template>

筛选和排序

<template>
  <oio-table :data="tableData" height="100%" border="full" stripe>
    <oio-column label="名称" field="name" />
    <oio-column label="描述" field="description" />
    <oio-column
      label="性别"
      field="sex"
      :component-data="{
        filters: sexFilters,
        filterMultiple: false
      }"
    />
    <oio-column label="年龄" field="age" sortable />
  </oio-table>
</template>
<script lang="ts">
import { OioColgroup, OioColumn, OioTable } from '@kunlun/dependencies';
import { random } from 'lodash-es';
import { defineComponent, ref } from 'vue';
import type { VxeColumnPropTypes } from 'vxe-table';

interface DataItem {
  name: string;
  description: string;
  age: number;
  sex: 'woman' | 'man';
}

export default defineComponent({
  components: {
    OioTable,
    OioColumn,
    OioColgroup
  },
  props: {},
  setup(props) {
    const tableData = ref<DataItem[]>([]);

    for (let i = 1; i <= 50; i++) {
      tableData.value.push({
        name: `名称${i}`,
        description: `这是一段描述 ${i}`,
        age: random(100),
        sex: i % 3 === 0 ? 'woman' : 'man'
      });
    }

    const sexFilters: VxeColumnPropTypes.Filters = [
      { label: '男', value: 'man' },
      { label: '女', value: 'woman' }
    ];

    return {
      tableData,
      sexFilters
    };
  }
});
</script>

格式化内容

<template>
  <oio-table :data="tableData" height="100%" border="full" stripe>
    <oio-column label="名称" field="name" />
    <oio-column label="描述" field="description" />
    <oio-column
      label="性别"
      field="sex"
      :component-data="{
        formatter: sexFormatter
      }"
    />
    <oio-column
      label="年龄"
      field="age"
      :component-data="{
        formatter: ageFormatter
      }"
    />
  </oio-table>
</template>
<script lang="ts">
import { OioColgroup, OioColumn, OioTable } from '@kunlun/dependencies';
import { random } from 'lodash-es';
import { defineComponent, ref } from 'vue';
import type { RowVO, VxeColumnPropTypes } from 'vxe-table';

interface DataItem {
  name: string;
  description: string;
  age: number;
  sex: 'Woman' | 'Man';
}

export default defineComponent({
  components: {
    OioTable,
    OioColumn,
    OioColgroup
  },
  props: {},
  setup(props) {
    const tableData = ref<DataItem[]>([]);

    for (let i = 1; i <= 50; i++) {
      tableData.value.push({
        name: `名称${i}`,
        description: `这是一段描述 ${i}`,
        age: random(100),
        sex: i % 3 === 0 ? 'Woman' : 'Man'
      });
    }

    const sexFormatter: VxeColumnPropTypes.Formatter<RowVO> = ({ cellValue }) => {
      if (cellValue === 'Man') {
        return '男';
      }
      if (cellValue === 'Woman') {
        return '女';
      }
      return cellValue;
    };

    const ageFormatter: VxeColumnPropTypes.Formatter<RowVO> = ({ cellValue }) => {
      return `${cellValue}岁`;
    };

    return {
      tableData,
      sexFormatter,
      ageFormatter
    };
  }
});
</script>

复选框

<template>
  <oio-table
    :data="tableData"
    height="100%"
    border="full"
    stripe
    @checked-all-change="onCheckedAllChange"
    @checked-change="onCheckedChange"
  >
    <oio-column type="checkbox" width="52" />
    <oio-column label="名称" field="name" />
    <oio-column label="描述" field="description" />
    <oio-column label="性别" field="sex" />
    <oio-column label="年龄" field="age" />
  </oio-table>
</template>
<script lang="ts">
import { CheckedChangeEvent, OioColgroup, OioColumn, OioTable } from '@kunlun/dependencies';
import { random } from 'lodash-es';
import { defineComponent, ref } from 'vue';

interface DataItem {
  name: string;
  description: string;
  age: number;
  sex: 'Woman' | 'Man';
}

export default defineComponent({
  components: {
    OioTable,
    OioColumn,
    OioColgroup
  },
  props: {},
  setup(props) {
    const tableData = ref<DataItem[]>([]);

    for (let i = 1; i <= 50; i++) {
      tableData.value.push({
        name: `名称${i}`,
        description: `这是一段描述 ${i}`,
        age: random(100),
        sex: i % 3 === 0 ? 'Woman' : 'Man'
      });
    }

    const onCheckedAllChange = (e: CheckedChangeEvent) => {
      console.log(e);
    };

    const onCheckedChange = (e: CheckedChangeEvent) => {
      console.log(e);
    };

    return {
      tableData,
      onCheckedAllChange,
      onCheckedChange
    };
  }
});
</script>

前端分页表格

<template>
  <div class="table-pagination-demo">
    <oio-table :data="showTableData" height="100%" :loading="loading">
      <oio-column type="checkbox" width="52" />
      <oio-column label="名称" field="name" />
      <oio-column label="描述" field="description" />
      <oio-column label="性别" field="sex" />
      <oio-column label="年龄" field="age" />
      <template #footer>
        <oio-pagination
          :total="total"
          v-model:current-page="currentPage"
          v-model:page-size="currentPageSize"
          @change="onPaginationChange"
        />
      </template>
    </oio-table>
  </div>
</template>
<script lang="ts">
import { OioColgroup, OioColumn, OioTable } from '@kunlun/dependencies';
import { OioPagination } from '@kunlun/vue-ui-antd';
import { random } from 'lodash-es';
import { defineComponent, ref } from 'vue';

interface DataItem {
  name: string;
  description: string;
  age: number;
  sex: 'Woman' | 'Man';
}

export default defineComponent({
  components: {
    OioTable,
    OioColumn,
    OioColgroup,
    OioPagination
  },
  props: {},
  setup(props) {
    const allTableData = ref<DataItem[]>([]);
    const showTableData = ref<DataItem[]>([]);
    const loading = ref(false);

    const total = 50;
    const currentPage = ref(1);
    const currentPageSize = ref(15);

    const onPaginationChange = (currentPage: number, pageSize: number) => {
      loading.value = true;
      setTimeout(() => {
        showTableData.value = allTableData.value.slice((currentPage - 1) * pageSize, currentPage * pageSize);
        loading.value = false;
      }, 200);
    };

    for (let i = 1; i <= total; i++) {
      allTableData.value.push({
        name: `名称${i}`,
        description: `这是一段描述 ${i}`,
        age: random(100),
        sex: i % 3 === 0 ? 'Woman' : 'Man'
      });
    }

    onPaginationChange(1, currentPageSize.value);

    return {
      allTableData,
      showTableData,
      loading,
      total,
      currentPage,
      currentPageSize,
      onPaginationChange
    };
  }
});
</script>
<style lang="scss">
.table-pagination-demo {
  height: 500px;
  width: 800px;

  .oio-table-wrapper {
    height: 100%;

    & > .ant-spin-container {
      height: 100%;
    }
  }
}
</style>

API

oio-table

Props

属性名类型默认值描述
sizestringundefined表格尺寸，可选值为 TableSize 枚举值（如 'large'、'middle'、'small'）
resizablebooleanundefined是否允许列宽调整
heightstringnumberundefined
borderbooleankeyof typeof TableBorderundefined
stripebooleanundefined是否显示斑马纹
rowClassNamestring(row: Record<string, unknown>, rowIndex: number) => stringundefined
cellClassNamestring(row: Record<string, unknown>, column: ColumnInfo, rowIndex: number, columnIndex: number) => stringundefined
headerRowClassNamestring(column: ColumnInfo, columnIndex: number) => stringundefined
headerCellClassNamestring(column: ColumnInfo, columnIndex: number) => stringundefined
footerRowClassNamestringFunctionundefined
footerCellClassNamestringFunctionundefined
rowStyleObject(row: Record<string, unknown>, rowIndex: number) => Objectundefined
headerRowStyleObjectFunctionundefined
cellStyleObject(row: Record<string, unknown>, column: ColumnInfo, rowIndex: number, columnIndex: number) => Objectundefined
headerCellStyleObjectFunctionundefined
customConfigRecord<string, any>{}自定义配置
loadingbooleanundefined是否显示加载状态
wrapperClassNamestringstring[]undefined
dataRecord<string, unknown>[][]表格数据
showOverflowbooleankeyof typeof TableOverflowundefined
showHeaderOverflowbooleankeyof typeof TableOverflowundefined
showFooterOverflowbooleankeyof typeof TableOverflowundefined
emptyTextstring''空数据提示文本
emptyImagestringundefined空数据提示图片
rowConfigVxeTablePropTypes.RowConfigundefined行配置（如行高、选中样式等），类型为 VxeTable
行配置接口
columnConfigVxeTablePropTypes.ColumnConfigundefined列配置（如对齐方式、排序等）
sortConfigVxeTablePropTypes.SortConfigundefined排序配置
radioConfigVxeTablePropTypes.SortConfigundefined单选框配置
checkboxConfigVxeTablePropTypes.CheckboxConfigundefined复选框配置
tooltipConfigVxeTablePropTypes.TooltipConfigundefinedTooltip 配置
expandConfigVxeTablePropTypes.ExpandConfigundefined展开行配置
editConfigVxeTablePropTypes.EditConfigundefined可编辑配置
treeConfigVxeTablePropTypes.TreeConfigundefined树形表格配置
scrollXVxeTablePropTypes.ScrollXundefined横向虚拟滚动配置
scrollYVxeTablePropTypes.ScrollYundefined纵向虚拟滚动配置
showFooterbooleanundefined是否显示表尾
footerMethodVxeTablePropTypes.FooterMethodundefined表尾计算方法
spanMethodVxeTablePropTypes.SpanMethodundefined单元格合并方法
mergeCellsVxeTablePropTypes.MergeCells[]单元格合并配置
componentDataRecord<string, unknown>undefined第三方扩展属性

Events

事件名参数描述
sort-changeevent: SortChangeEvent排序状态变化时触发，返回包含排序字段、方向及原始事件的对象
checked-changeevent: CheckedChangeEvent复选框状态变化时触发（行级），返回包含选中状态、行数据及原始事件的对象
checked-all-changeevent: CheckedChangeEvent全选复选框状态变化时触发，返回包含全选状态、行数据及原始事件的对象
radio-changeevent: RadioChangeEvent单选框状态变化时触发，返回包含新旧行数据及原始事件的对象
cell-clickrow: Record<string, unknown>, column: ColumnInfo, event: MouseEvent单元格点击事件，返回行数据、列信息及鼠标事件对象
cell-dblclickrow: Record<string, unknown>, column: ColumnInfo, event: MouseEvent单元格双击事件，返回行数据、列信息及鼠标事件对象
header-cell-clickcolumn: ColumnInfo, event: MouseEvent表头单元格点击事件，返回列信息及鼠标事件对象
header-cell-dblclickcolumn: ColumnInfo, event: MouseEvent表头单元格双击事件，返回列信息及鼠标事件对象
toggle-row-expandrow: Record<string, unknown>, isExpand: boolean展开行状态切换时触发，返回行数据及展开状态
edit-activedevent: ActiveEditorContext单元格进入编辑状态时触发，返回编辑上下文对象
edit-closedevent: ActiveEditorContext单元格编辑结束时触发，返回编辑上下文对象
scrollevent: ScrollEvent表格滚动时触发，返回滚动事件对象

Slots

插槽名描述
default表格主体内容（列定义）
header自定义表头内容
footer自定义表尾内容

Methods

方法名参数返回值描述
getOrigin-VxeTableInstance获取底层 VxeTable
实例
setCurrentRowrow: Record<string, unknown>void设置当前行（单选状态）
clearCurrentRow-void清除当前行（单选状态）
setCheckboxRowrows: Record<string, unknown>[], checked?: booleanvoid设置复选框选中行
clearCheckboxRow-void清除所有复选框选中行
resetCheckboxRowrows: Record<string, unknown>[]void重置复选框选中行（先清除再设置）
setRadioRowrow: Record<string, unknown>void设置单选框选中行
clearRadioRow-void清除单选框选中行
getAllColumns-ColumnInfo[]获取所有列配置
refreshColumn-void刷新列配置
updateFooter-void刷新表尾计算
loadColumnscolumns: ColumnInfo[]void加载列配置（追加模式）
reloadColumnscolumns: ColumnInfo[]void重新加载列配置（覆盖模式）
setEditRowrow: Record<string, unknown>void设置可编辑行
getActiveEditorRecord-RowContextundefined
activeCellEditorrow: Record<string, unknown>, fieldOrColumn: stringColumnInfovoid
clearEditor-void清除所有编辑状态
recalculaterefull?: booleanvoid重新计算表格布局（可选强制刷新）
allRowExpand-Promise<any>展开所有行（返回 Promise）
clearAllRowExpand-Promise<any>收起所有行（返回 Promise）
setRowExpandrow: Record<string, unknown>, isExpand: booleanPromise<any>切换行展开状态（返回 Promise）
sortsortConfs: VxeTableDefines.SortConfs[]Promise<any>手动触发排序（返回 Promise）

更多使用方式，可参考：vxe-table

oio-column

Props

属性名类型默认值描述
widthstringnumberundefined
minWidthstringnumberundefined
labelstringundefined列标题文本
classNamestring((context: RenderCellContext) => string)undefined
headerClassNamestring((context: RenderCellContext) => string)undefined
footerClassNamestring((context: RenderCellContext) => string)undefined
alignColumnAlignType'left'单元格内容对齐方式，可选值：'left'、'center'、'right'
headerAlignColumnAlignType'left'表头内容对齐方式
footerAlignColumnAlignType'left'表尾内容对齐方式
fixedColumnFixedTypeundefined列固定位置，可选值：'left'、'right' 或布尔值（固定左侧）
invisiblebooleanfalse是否隐藏列
resizablebooleanundefined是否允许调整列宽
treeNodebooleanundefined是否作为树形表格的节点列
editablebooleanfalse是否开启单元格编辑功能
cellEditableboolean((context: RowContext) => boolean)undefined
editorTriggerTableEditorTrigger'manual'编辑触发方式，可选值：'manual'（手动）、'click'（点击）
editorModeTableEditorMode'cell'编辑模式，可选值：'cell'（单元格内编辑）、'row'（行编辑）
editorCloseTriggerTableEditorCloseTrigger'manual'编辑关闭触发方式，可选值：'manual'（手动）、'blur'（失焦）
disableEditorRenderbooleanfalse是否禁用编辑状态渲染
rowEditorClosedByEnter((context: RowContext) => ReturnPromise<boolean>)undefined按回车键关闭编辑时的回调函数（返回 false 可阻止关闭）
rowEditorClosedByCancel((context: RowContext) => ReturnPromise<boolean>)undefined点击取消按钮关闭编辑时的回调函数
editorConfirmstring((context: RowContext) => string)undefined
editorConfirmPositionPopconfirmPlacement((context: RowContext) => PopconfirmPlacement)'top'
editorCondition((context: RowContext) => ReturnPromise<booleanundefined>)undefined
editorEnterTextstring((context: RowContext) => string)'确认'
editorCancelTextstring((context: RowContext) => string)'取消'
typestringundefined列类型（如 'seq' 表示序号列）
fieldstringundefined数据字段名（对应行数据的键）
invisibleContentboolean((context: RowContext) => boolean)undefined
sortablebooleanundefined是否开启排序功能
renderDefaultSlotCellRenderFunctionundefined自定义单元格内容渲染函数
renderEditSlotCellRenderFunctionundefined自定义编辑状态下单元格渲染函数
renderContentSlotCellRenderFunctionundefined自定义内容区域渲染函数（备用）
renderHeaderSlotCellRenderFunctionundefined自定义表头渲染函数
componentDataRecord<string, unknown>undefined第三方扩展属性

Slots

插槽名类型描述
default(context: RenderRowContext) => VNode[]自定义单元格内容
edit(context: RenderRowContext) => VNode[]自定义编辑状态单元格内容
header(context: RenderRowContext) => VNode[]自定义表头内容

更多使用方式，可参考：vxe-column

oio-colgroup

Props

属性名类型默认值描述
widthstringnumberundefined
minWidthstringnumberundefined
labelstringundefined列组标题文本
classNamestring((context: RenderCellContext) => string)undefined
headerClassNamestring((context: RenderCellContext) => string)undefined
footerClassNamestring((context: RenderCellContext) => string)undefined
alignColumnAlignTypeundefined列组单元格内容对齐方式，可选值：'left'、'center'、'right'
headerAlignColumnAlignType'center'列组表头内容对齐方式（默认居中）
footerAlignColumnAlignTypeundefined列组表尾内容对齐方式
fixedColumnFixedTypeundefined列组固定位置，可选值：'left'、'right' 或布尔值（固定左侧）
invisiblebooleanfalse是否隐藏列组
resizablebooleanundefined是否允许调整列组宽度
treeNodebooleanundefined是否作为树形表格的节点列组
fieldstringundefined数据字段名（用于关联数据源）
componentDataRecord<string, unknown>undefined第三方扩展属性

Slots

插槽名描述
default列组包含的列定义

更多使用方式，可参考：vxe-colgroup

默认页脚
Copyright © 2025 Mr.Hope