@bhplugin/vue3-数据表

零依赖 Vue 3 数据表组件,包含客户端/服务器侧页,排序,过滤,行选择,以及自定义单元格渲染等功能.

示例

文档演示文稿( D)

安装

国家预防机制

npm install @bhplugin/vue3-datatable --save

雅伦

yarn add @bhplugin/vue3-datatable

使用量

<template>
    <vue3-datatable :rows="rows" :columns="cols" :sortable="true" :columnFilter="true"> </vue3-datatable>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import Vue3Datatable from "@bhplugin/vue3-datatable";
    import type { IColumnDefinition } from "@bhplugin/vue3-datatable";
    import "@bhplugin/vue3-datatable/dist/style.css";

    const cols = ref<IColumnDefinition[]>([
        { field: "id", title: "ID", isUnique: true, type: "number", filter: false },
        { field: "name", title: "Name" },
        { field: "email", title: "Email" },
        { field: "age", title: "Age", type: "number" },
        { field: "dob", title: "Date of Birth", type: "date" },
        { field: "isActive", title: "Active", type: "bool" },
        { field: "address.city", title: "City" },
    ]);

    const rows = ref<Array<Record<string, unknown>>>([
        { id: 1, name: "John Doe", email: "[email protected]", age: 28, dob: "1997-05-15", isActive: true, address: { city: "New York" } },
        { id: 2, name: "Jane Smith", email: "[email protected]", age: 34, dob: "1991-11-22", isActive: false, address: { city: "London" } },
        // ...
    ]);
</script>

道具

列缩放键

{
    no_filter: 'No filter',
    contain: 'Contain', not_contain: 'Not contain',
    equal: 'Equal', not_equal: 'Not equal',
    start_with: 'Starts with', end_with: 'Ends with',
    greater_than: 'Greater than', greater_than_equal: 'Greater than or equal',
    less_than: 'Less than', less_than_equal: 'Less than or equal',
    is_null: 'Is null', is_not_null: 'Not null',
    all: 'All', true: 'True', false: 'False'   // boolean column filter labels
}

栏定义

活动

活动规则

• 排序对 没有 重置页面
• 过滤/ 搜索/ 页面大小重排到第 1 页, 但只发布特定事件( 不) pageChange(中文(简体) )
• pageChange 仅来自明确用户 pagination 点击的点火
• 重置期间,仅限 reset (+ 数) changeServer (在服务器模式中) 发出——所有其他事件被压制

方法

槽数

自定义单元格渲染( 按列字段命名)

<vue3-datatable :rows="rows" :columns="cols">
    <template #name="{ value }">
        <strong>{{ value.name }}</strong>
    </template>
</vue3-datatable>

插孔箭头插槽

<template #firstArrow> &laquo; </template>
<template #previousArrow> &lsaquo; </template>
<template #nextArrow> &rsaquo; </template>
<template #lastArrow> &raquo; </template>

状态空位

<template #noData>
    <div>No records found.</div>
</template>

服务器模式示例

<vue3-datatable
    :rows="rows"
    :columns="cols"
    :loading="loading"
    :totalRows="totalRows"
    :isServerMode="true"
    :pageSize="10"
    :sortable="true"
    :columnFilter="true"
    @page-change="onPageChange"
    @page-size-change="onPageSizeChange"
    @sort-change="onSortChange"
    @filter-change="onFilterChange"
    @search-change="onSearchChange"
/>

更改日志

更改日志

许可证

@bhplugin/vue3-数据表 是一个开源软件,根据该软件许可 麻省理工学院许可证。 。 。 .

我们的其他插件

角数据表 - @bhplugin/ng-数据表

支助