@fish-render/table

Vue 3 table 组件，提供现代化的用户界面体验。

安装

npm install @fish-render/table
# 或
yarn add @fish-render/table
# 或
pnpm add @fish-render/table

使用方法

方式一：自动引入样式（推荐）

当你引入组件时，样式会自动加载：

<template>
  <Table>
    <!-- 组件内容 -->
  </Table>
</template>

<script setup>
import { Table } from '@fish-render/table'
// 样式会自动加载，无需额外引入
</script>

方式二：手动引入样式

如果你想要手动控制样式的引入时机：

<template>
  <Table>
    <!-- 组件内容 -->
  </Table>
</template>

<script setup>
import { Table } from '@fish-render/table'
</script>

<style>
/* 手动引入样式 */
@import '@fish-render/table/style.css';
</style>

方式三：在 main.js 中全局引入

import { createApp } from 'vue'
import App from './App.vue'
import { Table } from '@fish-render/table'
import '@fish-render/table/style.css'

const app = createApp(App)

app.component('Table', Table)

app.mount('#app')

方式四：使用插件方式

import { createApp } from 'vue'
import App from './App.vue'
import TablePlugin from '@fish-render/table'

const app = createApp(App)
app.use(TablePlugin)
app.mount('#app')

示例

基础用法

<template>
  <Table>
    <!-- 组件内容 -->
  </Table>
</template>

API

Table Props

| 参数 | 类型 | 默认值 | 说明 | | ---- | ---- | ------ | ---- | | - | - | - | - |

类型定义

// Table 组件 Props
interface TableProps {
  // 组件属性类型定义
}

样式自定义

组件使用 CSS 类名，你可以通过覆盖这些类名来自定义样式：

/* table 组件样式 */
.fish-table {
  /* 自定义组件样式 */
}

注意事项

1. 浏览器兼容性：组件使用了现代 CSS 特性，确保在现代浏览器中使用
2. 样式加载：样式是全局的，会在应用启动时自动加载
3. Tree Shaking：如果你使用 Tree Shaking，建议使用手动引入样式的方式
4. TypeScript 支持：组件完全支持 TypeScript，提供完整的类型定义

许可证

MIT License