🚀
高性能
支持大量数据渲染，虚拟滚动优化，流畅的用户体验
VantTable
功能丰富的Vue表格组件
基于 Vant UI，支持高级选择、固定列、排序过滤等特性
Skip to content 
快速安装
bash
npm install @nicky132/vant-table
# 或
yarn add @nicky132/vant-table
# 或
pnpm add @nicky132/vant-table简单使用
vue
<template>
<VantTable
:headers="headers"
:data="data"
:selectable="true"
select-mode="checkbox"
@selection-change="handleSelectionChange"
/>
</template>
<script setup>
import { ref } from 'vue'
import { VantTable } from '@nicky132/vant-table'
import '@nicky132/vant-table/dist/index.css'
const headers = ref([
{ key: 'id', label: 'ID', width: 100, sortable: true },
{ key: 'name', label: '姓名', width: 120, fixed: 'left' },
{ key: 'department', label: '部门', sortable: true },
{ key: 'salary', label: '薪资', type: 'currency', sortable: true },
{ key: 'status', label: '状态', width: 100, fixed: 'right' }
])
const data = ref([
{ id: 1, name: '张三', department: '技术部', salary: 25000, status: '在职' },
{ id: 2, name: '李四', department: '产品部', salary: 20000, status: '在职' },
])
const handleSelectionChange = (event) => {
console.log('选择变化:', event.selectedRows)
}
</script>