TinyVue Wrapper

基于 TinyVue 的组件封装库，提供更便捷的开发体验。

组件

Table 表格组件

增强的表格组件，支持搜索、列设置等功能。

基本用法

<template>
  <SeeHooTable
    :configs="tableConfigs"
    :api="fetchData"
    :transform-request="transformRequest"
    :transform-response="transformResponse"
    @selection-all-change="handleSelectionAllChange"
    @selection-change="handleSelectionChange"
    @on-search="handleSearch"
    @on-reset="handleReset"
  />
</template>

<script setup>
import { ref } from 'vue';
import { SeehooTable } from 'seehoo-tinyvue-wrapper';

const tableConfigs = ref({
  columns: [
    { type: 'selection', width: 60 },
    { field: 'name', title: '姓名', visible: true },
    { field: 'age', title: '年龄', visible: true },
    { field: 'email', title: '邮箱', visible: false },
  ],
  search: {
    items: [
      {
        key: 'name',
        label: '姓名',
        type: 'input',
        condition: true,
        placeholder: '请输入姓名',
      },
    ],
  },
});

// 数据获取函数
const fetchData = async (params) => {
  // params 包含分页和搜索参数
  const { currentPage, pageSize, ...searchParams } = params;

  // 调用后端API
  const response = await fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify(params),
  });

  return {
    data: [], // 表格数据
    total: 0, // 总条数
  };
};

// 请求参数转换
const transformRequest = (params) => {
  // 可以在这里转换请求参数格式
  return {
    ...params,
    // 添加额外的参数
    timestamp: Date.now(),
  };
};

// 响应数据转换
const transformResponse = (response) => {
  // 可以在这里转换响应数据格式
  return {
    data: response.data.map((item) => ({
      ...item,
      // 添加计算字段
      fullName: `${item.firstName} ${item.lastName}`,
    })),
    total: response.total,
  };
};

// 全选变更事件
const handleSelectionAllChange = (selection) => {
  console.log('全选变更:', selection);
};

// 选择变更事件
const handleSelectionChange = (selection) => {
  console.log('选择变更:', selection);
  // selection.type: 当前为选中还是取消
  // selection.rows: 选中的行数据
  // selection.row: 当前操作的行数据
};

// 搜索事件
const handleSearch = (values) => {
  console.log('搜索条件:', values);
};

// 重置事件
const handleReset = (values) => {
  console.log('重置条件:', values);
};
</script>

功能特性

• ✅ 搜索功能: 支持多种搜索条件类型
• ✅ 列设置: 拖拽排序、显示/隐藏控制
• ✅ 分页: 内置分页功能
• ✅ 选择: 支持行选择和全选
• ✅ 响应式: 自动响应列配置变化

API

| 参数 | 说明 | 类型 | 默认值 | | ----------------- | ---------------- | -------- | ------ | | configs | 表格配置 | Object | - | | configs.columns | 列配置数组 | Array | [] | | configs.search | 搜索配置 | Object | {} | | api | 数据获取函数 | Function | - | | transformRequest | 请求参数转换函数 | Function | - | | transformResponse | 响应数据转换函数 | Function | - |

列配置

{
  field: 'name',           // 字段名
  title: '姓名',           // 列标题
  visible: true,           // 是否显示
  type: 'selection'        // 列类型：selection(选择框)、radio(单选框)
}

事件

| 事件名 | 说明 | 回调参数 | | ------------------ | -------------- | ------------------- | | onSearch | 搜索时触发 | (values: Object) | | onReset | 重置搜索时触发 | (values: Object) | | selectionChange | 选择变更时触发 | (selection: Object) | | selectionAllChange | 全选变更时触发 | (selection: Array) |

安装

npm install seehoo-tinyvue-wrapper

使用

import { SeeHooTable } from 'seehoo-tinyvue-wrapper';
import 'seehoo-tinyvue-wrapper/style';

开发

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建
pnpm build