VTJ.PRO

Appearance

XGrid 表格 ​

示例 ​

基础表格 ​

No Data

No Data

加载中...

<template>
  <div style="height: 200px">
    <XGrid
      ref="gridRef"
      id="demo"
      size="small"
      :columns="columns"
      :loader="loader">
    </XGrid>
  </div>
</template>

<script lang="ts" setup>
  import { ref, type Ref } from 'vue';
  import { XGrid, type GridColumns } from '@vtj/ui';
  import { numberFormat } from '@vtj/utils';
  import { data as tableData } from './data';

  const columns: Ref<GridColumns> = ref([]);

  setTimeout(() => {
    columns.value = [
      { type: 'checkbox', title: '', fixed: 'left' },
      { type: 'seq', title: '序号', fixed: 'left' },
      {
        field: 'id',
        title: 'ID'
      },
      {
        field: 'name',
        title: '姓名',
        filters: [{ value: null }],
        cellRender: {
          name: 'LinkCell',
          events: {
            click(value: any, e: any) {
              console.log(value, e);
            }
          }
        }
      },
      {
        field: 'sex',
        title: '性别',
        filters: [
          { label: '男', value: 1 },
          { label: '女', value: 0 }
        ],
        formatter: (data: any) => {
          const { row } = data;
          const map: Record<number, any> = {
            1: '男',
            0: '女'
          };
          return map[row.sex];
        }
      },
      {
        field: 'age',
        title: '年龄',
        sortable: true
      },
      {
        field: 'salary',
        title: '工资',
        formatter: (e: any) => `￥${numberFormat(e.cellValue, '0.00')}`
      }
    ] as GridColumns;
  }, 1000);

  const loader = () => {
    return tableData;
  };
</script>

分页表格 ​

No Data

No Data

加载中...
Total 0
  • 1
Go to

<template>
  <div class="container">
    <XGrid
      ref="gridRef"
      id="demo"
      size="small"
      :columns="columns"
      :rowSortable="true"
      @row-sort="onRowSort"
      @column-sort="onColSort"
      columnSortable
      :filter-renders="{ name: 'XInput' }"
      :toolbar-config="{}"
      :cell-renders="{ sex: 'XTag' }"
      @resizable-change="onResize"
      :customable="true"
      :getCustom="getCustom"
      :saveCustom="saveCustom"
      :border="true"
      :stripe="false"
      :loader="loader"
      :page="page"
      :pager="true"
      :auto="true"
      :resizable="true"
      :virtual="true"
      :sumFields="['age', 'month']"
      :avgFields="['age', 'year']"
      :sumAllFields="{ age: 23232 }">
    </XGrid>
  </div>
</template>
<script lang="ts" setup>
  import { ref, type Ref } from 'vue';
  import { XGrid, type GridColumns } from '@vtj/ui';
  import { storage, numberFormat } from '@vtj/utils';
  import { data as fetchTableData } from './data';

  const gridRef = ref<InstanceType<typeof XGrid>>();
  const page = ref(1);
  const fetchData = (data: any) => {
    return fetchTableData;
  };

  const columns: Ref<GridColumns> = ref([]);
  setTimeout(() => {
    columns.value = [
      { type: 'checkbox', title: '', width: 60, fixed: 'left' },
      { type: 'seq', title: '序号', width: 60, fixed: 'left' },
      {
        field: 'id',
        title: 'ID'
      },
      {
        field: 'name',
        title: '姓名',
        filters: [{ value: null }],
        cellRender: {
          name: 'LinkCell',
          events: {
            click(value: any, e: any) {
              console.log(value, e);
            }
          }
        }
      },
      {
        field: 'avatar',
        title: '头像',
        showOverflow: false,
        visible: true
      },
      {
        field: 'sex',
        title: '性别',
        filters: [
          { label: '男', value: 1 },
          { label: '女', value: 0 }
        ],
        formatter: (data: any) => {
          const { row } = data;
          const map: Record<number, any> = {
            1: '男',
            0: '女'
          };
          return map[row.sex];
        }
      },
      {
        field: 'age',
        title: '年龄',
        sortable: true
      },
      {
        field: 'birth',
        title: '出生日期',
        children: [
          { field: 'year', title: '年' },
          { field: 'month', title: '月' },
          { field: 'date', title: '日' }
        ]
      },
      {
        field: 'address',
        title: '地址',
        children: [
          { field: 'province', title: '省' },
          { field: 'city', title: '市' },
          { field: 'county', title: '区' }
        ]
      },
      {
        field: 'salary',
        title: '工资',
        formatter: (e: any) => `￥${numberFormat(e.cellValue, '0.00')}`
      },
      {
        field: 'intro',
        title: '简介'
      },
      {
        field: 'join',
        title: '入职日期',
        filters: [{ value: '' }],
        filterRender: {
          name: 'DateFilter'
        }
      },
      {
        field: 'create',
        title: '创建时间'
      },
      {
        field: 'actions',
        title: '操作',
        width: '150px'
      }
    ] as GridColumns;
  }, 100);

  setTimeout(() => {
    columns.value = [
      { type: 'checkbox', title: '', width: 60, fixed: 'left' },
      { type: 'seq', title: '序号', width: 60, fixed: 'left' },
      {
        field: 'id',
        title: 'ID'
      },
      {
        field: 'name',
        title: '姓名',
        filters: [{ value: null }],
        cellRender: {
          name: 'LinkCell',
          events: {
            click(value: any, e: any) {
              console.log(value, e);
            }
          }
        }
      },
      {
        field: 'avatar',
        title: '头像',
        showOverflow: false,
        visible: true
      },
      {
        field: 'sex',
        title: '性别',
        filters: [
          { label: '男', value: 1 },
          { label: '女', value: 0 }
        ],
        formatter: (data: any) => {
          const { row } = data;
          const map: Record<number, any> = {
            1: '男',
            0: '女'
          };
          return map[row.sex];
        }
      },
      {
        field: 'age',
        title: '年龄',
        sortable: true
      },
      {
        field: 'birth',
        title: '出生日期',
        children: [
          { field: 'year', title: '年' },
          { field: 'month', title: '月' },
          { field: 'date', title: '日' }
        ]
      },
      {
        field: 'address',
        title: '地址',
        children: [
          { field: 'province', title: '省' },
          { field: 'city', title: '市' },
          { field: 'county', title: '区' }
        ]
      },
      {
        field: 'salary',
        title: '工资',
        formatter: (e: any) => `￥${numberFormat(e.cellValue, '0.00')}`
      },
      {
        field: 'intro',
        title: '简介'
      },
      {
        field: 'join',
        title: '入职日期',
        filters: [{ value: '' }],
        filterRender: {
          name: 'DateFilter'
        }
      },
      {
        field: 'create',
        title: '创建时间'
      },
      {
        field: 'actions',
        title: '操作',
        width: '150px'
      }
    ] as GridColumns;

    // console.log(gridRef.value?.vxeRef?.getTableColumn());
  }, 1000);

  const onRowSort = (e: any) => {
    console.log('onRowSort', e);
  };
  const onColSort = (e: any) => {
    console.log('onColSort', e);
  };

  const onResize = (e: any) => {
    console.log('onResize', e);
  };

  const getCustom = async (id: string) => {
    return storage.get(id, { type: 'local' });
  };
  const saveCustom = async (info: any) => {
    storage.save(info.id, info, { type: 'local' });
  };

  const loader: any = async (params: any) => {
    const { page, pageSize = 50 } = params || {};
    console.log('query', params);
    return await fetchData({
      currentPage: page,
      pageSize,
      total: 1000
    });
  };
</script>

<style lang="scss" scope>
  .container {
    height: 100%;
  }
</style>

API ​

属性 ​

属性名说明类型默认值
id表格id, 保存用户自定义配置时需要用到 的唯一 标识 （被某些特定的功能所依赖）string-
columns列配置，重定义是为了实现列拖拽排序， watch列变化变化刷新列array[]
loader数据加载器function-
rowSortable行拖拽排序boolean | objectfalse
columnSortable列拖拽排序boolean | objectfalse
customable开启用户自定义boolean-
getCustom获取自定义配置function-
saveCustom保存自定义配置function-
resizable开启列resizablebooleanfalse
pager开启分页boolean-
page初始页码number1
pageSize初始每页显示条目个数number50
pageSizes每页显示个数选择器的选项设置array[50, 100, 200, 500]
auto初始执行加载函数booleantrue
virtual开启虚拟滚动booleanfalse
cellRenders单元格渲染器object-
editRenders编辑状态单元格渲染器object-
filterRenders过滤器渲染器object-
editable开启支持编辑模式booleanfalse
sumFields单页合计列array-
avgFields单页平均值列array-
sumAllFields全部数据总计列object-

事件 ​

名称说明参数
editChange修改数据时触发(rows)

插槽 ​

插槽名说明类型
custom自定义插槽-
empty没有数据-
loading加载中效果-
form表单展示-
toolbar工具栏-
toolbar__buttons工具栏按钮-
top顶部区域-
bottom底部区域-
pager开启分页-
pager__left分页左边-

暴露 ​

名称说明类型
statepage:number ; pageSize:numberobject
load--
search--
vxeRef--
rowSortable--
columnSortable--
insertActived--
validate--
getSelected--
remove--
getRows--
setActived--
doLayout--
getRecords--
setSelectCell--
$vtjDynamicSlots--

Released under the MIT License.

Copyright © 2024-present VTJ.PRO