vue3-ts-table
TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

Vue3 TypeScript Table 组件

一个基于 Vue 3 和 TypeScript 开发的表格组件。

安装

npm install vue3-ts-table

使用方法

全局注册

import { createApp } from 'vue'
import VTable from 'vue3-ts-table'
import 'vue3-ts-table/dist/index.css'

const app = createApp(App)
app.use(VTable)

局部注册

import VTable from 'vue3-ts-table'

export default {
  components: {
    VTable
  }
}

基本用法

<template>
  <v-table :columns="columns" :data="data" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const columns = [
      { key: 'name', title: '姓名' },
      { key: 'age', title: '年龄' },
      { key: 'address', title: '地址' }
    ]

    const data = [
      { name: '张三', age: 25, address: '北京' },
      { name: '李四', age: 30, address: '上海' }
    ]

    return {
      columns,
      data
    }
  }
})
</script>

API

Props

参数 说明 类型 必填 默认值
columns 表格列的配置描述 TableColumn[] []
data 表格数据 Record<string, any>[] []

TableColumn

参数 说明 类型 必填 默认值
key 列数据在数据项中对应的路径 string -
title 列头显示文字 string -

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建组件库
npm run build:lib

License

MIT

Package Sidebar

Install

npm i vue3-ts-table

Weekly Downloads

0

Version

1.0.7

License

MIT

Unpacked Size

17.5 kB

Total Files

20

Last publish

Collaborators

  • zhaoguangxu