Vben Vxe Table

Vben Vxe Table wraps vxe-table together with Vben Form so you can build searchable data grids with a shared API.

Adapter Example

The current renderer adapter uses renderTableDefault(...) for table cell rendering:

vxeUI.renderer.add('CellImage', {
  renderTableDefault(_renderOpts, params) {
    const { column, row } = params;
    return h(Image, { src: row[column.field] });
  },
});

vxeUI.renderer.add('CellLink', {
  renderTableDefault(renderOpts) {
    const { props } = renderOpts;
    return h(
      Button,
      { size: 'small', type: 'link' },
      { default: () => props?.text },
    );
  },
});

Basic Usage

<script setup lang="ts">
import { useVbenVxeGrid } from '#/adapter/vxe-table';

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions: {},
  formOptions: {},
  gridEvents: {},
});
</script>

<template>
  <Grid />
</template>

<script lang="ts" setup>
import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';

import { Button, message } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';

import { MOCK_TABLE_DATA } from '../table-data';

interface RowType {
  address: string;
  age: number;
  id: number;
  name: string;
  nickname: string;
  role: string;
}

const gridOptions: VxeGridProps<RowType> = {
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { field: 'name', title: 'Name' },
    { field: 'age', sortable: true, title: 'Age' },
    { field: 'nickname', title: 'Nickname' },
    { field: 'role', title: 'Role' },
    { field: 'address', showOverflow: true, title: 'Address' },
  ],
  data: MOCK_TABLE_DATA,
  pagerConfig: {
    enabled: false,
  },
  sortConfig: {
    multiple: true,
  },
};

const gridEvents: VxeGridListeners<RowType> = {
  cellClick: ({ row }) => {
    message.info(`cell-click: ${row.name}`);
  },
};

const [Grid, gridApi] = useVbenVxeGrid({ gridEvents, gridOptions });

const showBorder = gridApi.useStore((state) => state.gridOptions?.border);
const showStripe = gridApi.useStore((state) => state.gridOptions?.stripe);

function changeBorder() {
  gridApi.setGridOptions({
    border: !showBorder.value,
  });
}

function changeStripe() {
  gridApi.setGridOptions({
    stripe: !showStripe.value,
  });
}

function changeLoading() {
  gridApi.setLoading(true);
  setTimeout(() => {
    gridApi.setLoading(false);
  }, 2000);
}
</script>

<template>
  <!-- 此处的`vp-raw` 是为了适配文档的展示效果，实际使用时不需要 -->
  <div class="vp-raw w-full">
    <Grid>
      <template #toolbar-tools>
        <Button class="mr-2" type="primary" @click="changeBorder">
          {{ showBorder ? '隐藏' : '显示' }}边框
        </Button>
        <Button class="mr-2" type="primary" @click="changeLoading">
          显示loading
        </Button>
        <Button class="mr-2" type="primary" @click="changeStripe">
          {{ showStripe ? '隐藏' : '显示' }}斑马纹
        </Button>
      </template>
    </Grid>
  </div>
</template>

GridApi

Method	Description	Type
setLoading	update loading state	(loading: boolean) => void
setGridOptions	merge new grid options	(options: Partial<VxeGridProps['gridOptions']>) => void
reload	reload data and reset pagination	(params?: Record<string, any>) => void
query	query data while keeping the current page	(params?: Record<string, any>) => void
grid	vxe-grid instance	VxeGridInstance
formApi	search form API	FormApi
toggleSearchForm	toggle or force the search form visible state	(show?: boolean) => boolean

Props

Prop	Description	Type
tableTitle	table title	string
tableTitleHelp	help text for the table title	string
class	class for the outer container	string
gridClass	class for the vxe-grid node	string
gridOptions	vxe-grid options	DeepPartial<VxeTableGridOptions>
gridEvents	vxe-grid event handlers	DeepPartial<VxeGridListeners>
formOptions	search form options	VbenFormProps
showSearchForm	whether the search form is visible	boolean
separator	separator between the search form and table body	boolean | SeparatorOptions

Slots

Slot	Description
toolbar-actions	left side of the toolbar, near the title
toolbar-tools	right side of the toolbar, before built-in tool buttons
table-title	custom table title

All named slots starting with form- are forwarded to the search form.

Contributors

xingyu4j

Changelog

Last edited 10 days ago

View full history

6b3bcee-docs(@vben/docs): sync component docs with current APIs