Yspy Table

一个基于 Vue 3 和 Element Plus 的强大、可定制的表格组件。

特性

• 🚀 基于 Vue 3 和 Element Plus
• 📊 支持多种表格功能（选择、排序、分页等）- 🔧 高度可定制化
• 🎯 内置工具栏（刷新、导出、搜索）
• 📱 响应式设计
• 🔒 代码混淆保护
• 📦 支持 npm 发布

安装

npm install yspy-table

快速开始

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import YspyTable from 'yspy-table'

const app = createApp(App)

app.use(ElementPlus)
app.use(YspyTable)

app.mount('#app')

基本用法

<template>
  <yspy-table
    :data="tableData"
    :columns="columns"
    :show-index="true"
    :show-selection="true"
    @refresh="handleRefresh"
    @export="handleExport"
    @search="handleSearch"
  />
</template>

<script setup>
import { ref } from 'vue'

const tableData = ref([
  { id: 1, name: '张三', age: 28, department: '技术部' },
  { id: 2, name: '李四', age: 32, department: '产品部' }
])

const columns = ref([
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'age', label: '年龄', width: 100 },
  { prop: 'department', label: '部门', width: 150 }
])

const handleRefresh = () => {
  console.log('刷新数据')
}

const handleExport = (data) => {
  console.log('导出数据', data)
}

const handleSearch = (keyword) => {
  console.log('搜索关键词', keyword)
}
</script>

Props

数据相关

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | data | 表格数据 | Array | [] | | columns | 列配置 | Array | [] |

表格样式

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | border | 是否显示边框 | Boolean | true | | stripe | 是否显示斑马纹 | Boolean | true | | size | 表格尺寸 | String | 'default' | | height | 表格高度 | String/Number | - | | maxHeight | 表格最大高度 | String/Number | - |

工具栏

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | showToolbar | 显示工具栏 | Boolean | true | | showRefresh | 显示刷新按钮 | Boolean | true | | showExport | 显示导出按钮 | Boolean | true | | showSearch | 显示搜索框 | Boolean | true |

表格功能

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | showSelection | 显示选择列 | Boolean | false | | showIndex | 显示序号列 | Boolean | false | | indexLabel | 序号列标题 | String | '序号' | | indexWidth | 序号列宽度 | String/Number | 80 |

分页

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | showPagination | 显示分页 | Boolean | true | | total | 总条数 | Number | 0 | | currentPage | 当前页码 | Number | 1 | | pageSize | 每页显示条数 | Number | 10 | | pageSizes | 每页显示条数选项 | Array | [10,20,50,100] |

Events

| 事件名 | 说明 | 参数 | |--------|------|------| | refresh | 点击刷新按钮时触发 | - | | export | 点击导出按钮时触发 | data | | search | 搜索内容变化时触发 | keyword | | selection-change | 选择项发生变化时触发 | selection | | row-click | 点击行时触发 | row, column, event | | sort-change | 排序条件发生变化时触发 | { column, prop, order } | | size-change | 每页显示条数变化时触发 | size | | current-change | 当前页码变化时触发 | page |

Slots

| 名称 | 说明 | |------|------| | toolbar | 自定义工具栏 | | empty | 自定义空数据内容 | | pagination | 自定义分页器 | | [column.slot] | 自定义列内容 | | operation | 操作列内容 |

方法

通过 ref 可以调用以下方法：

<template>
  <yspy-table ref="tableRef" />
</template>

<script setup>
import { ref } from 'vue'

const tableRef = ref()

// 清空选择
const clearSelection = () => {
  tableRef.value.clearSelection()
}

// 切换行选择状态
const toggleRowSelection = (row, selected) => {
  tableRef.value.toggleRowSelection(row, selected)
}

// 切换全选状态
const toggleAllSelection = () => {
  tableRef.value.toggleAllSelection()
}
</script>

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建库
npm run build:lib

# 构建演示页面
npm run build:demo

构建配置

组件使用 Vite 构建，配置了代码混淆：

• 移除 console 和 debugger
• 代码压缩和变量名混淆
• 移除注释

发布到 npm

1. 更新 package.json 中的版本号
2. 构建组件：npm run build:lib
3. 发布到 npm：npm publish

许可证

MIT License

支持

如有问题或建议，请提交 Issue 或联系作者。