@banmao/protable v0.3.1

Protable

Protable 是基于 naive UI 封装的组件库，仅支持 Vue3。

安装

npm install naive-ui @banmao/portable --save

快速上手

<template>
    <Protable
        pageTitle="Table"
        :rowKey="rowKey"
        :data-source="dataSource"
        :columns="columns"
        :loading="loading"
        :pagination="pagination"
        @update:pageSize="(e) => (pagination.pageSize = e)"
        @update:page="(e) => (pagination.page = e)"
        @loadData="loadData"
        :showCreate="false"
        flex-height>
        </Protable>

</template>

<script lang="tsx" setup>

import Portable from '@banmao/portable'

interface RowData {
    name: string
    id: number
}

const columns = ref<ProtableColumns<RowData>>([
    {
        title: '名称',
        key: 'name',
        valueType: 'text',
        resizable: true
    }
])

const pagination = ref({
    pageSize: 10,
    itemCount: 100,
    page: 1
})

const dataSource = ref<RowData[]>([
    { name: 'One', id: 1 },
    { name: 'Two', id: 2 },
    { name: 'Three', id: 3 },
    { name: 'Four', id: 4 },
    { name: 'Five', id: 5 },
    { name: 'Six', id: 6 },
    { name: 'Seven', id: 7 },
    { name: 'Eight', id: 8 },
    { name: 'Nine', id: 9 },
])

const rowKey = (row: RowData) => row.id

const loading = ref<boolean>(false)

const loadData = () => {
    loading.value = true
    setTimeout(() => {
        loading.value = false
    }, 1000)
}

onMounted(() => {
    loadData()
})

</script>

API

Protable Props

参考 naive-ui DataTable 组件

ProtableColumn Props

参考 naive-ui DataTable 组件

另外支持 如下：

Protable Slots

参考 naive-ui DataTable 组件