✅ 功能亮点

| 📋 支持动态列配置（columns） | 可定义字段绑定、自定义渲染函数 | | ------------------------------ | ----------------------------------------- | | 🔍 搜索栏自动构建 | 标记search: true的列会出现在搜索表单中 | | 🖼 自定义单元格渲染 | 支持h()函数返回 VNode（如图片、开关等） | | 📄 分页加载数据 | 支持翻页，并触发远程请求 | | ⏳ Loading 状态 | 表格加载时显示 loading 效果 | | 🔁 数据刷新机制 | 支持搜索、重置操作 |

🧰 技术栈

| 框架 | Vue 3 + Composition API | | -------- | ---------------------------------------- | | UI 库 | Element Plus | | 构建工具 | Vite / Webpack | | 渲染方式 | JSX +h()虚拟节点 | | 开发语言 | TypeScript / JavaScript |

📦 安装与引入

在你的 Vue 项目中安装依赖：

npm install element-plus

引入组件：

import ProTable from "@/components/proTable/index.vue";

在模板中使用：

<template>
  <pro-table :columns="columns" @request="handleRequest" :is-pagination="true" />
</template>

🧱 props 参数说明

| columns | Array | ✅ 是 | 列配置数组，支持字段绑定、搜索项、自定义渲染 | | -------------- | -------- | ----- | ------------------------------------------------------------- | | isPagination | Boolean | ❌ 否 | 是否启用分页，默认为false | | request | Function | ✅ 是 | 数据请求回调函数，需返回数据并执行callback({ data, total }) |

🧩 columns 配置详解

每个 column 支持以下属性：

| prop | string | ✅ 是 | 对应数据字段名（如name,age） | | --------- | -------- | ----- | ---------------------------------- | | label | string | ✅ 是 | 表头显示文本 | | type | string | ❌ 否 | 特殊类型（如index,selection） | | width | string | ❌ 否 | 列宽度（如"100px"） | | fixed | string | ❌ 否 | 固定列（如"right"） | | search | boolean | ❌ 否 | 是否出现在搜索栏中 | | formate | function | ❌ 否 | 自定义表单项渲染函数（用于搜索栏） | | h | function | ❌ 否 | 自定义单元格渲染函数（用于表格内） |

`---

🧪 使用示例

示例代码：

<script setup lang="jsx">
import { ref } from "vue";
import ProTable from "@/components/proTable/index.vue";
import { h } from "vue";
import {
  ElImage,
  ElSwitch,
  ElButton,
  ElSelect,
  ElOption
} from "element-plus";

const columns = ref([
  {
    type: "selection"
  },
  {
    type: "index",
    label: "序号",
    width: "100"
  },
  {
    prop: "name",
    label: "姓名",
    search: true
  },
  {
    prop: "age",
    label: "年龄",
    search: true
  },
  {
    prop: "sex",
    label: "性别",
    search: true,
    formate: () =>
      h(ElSelect, {
        style: { width: '120px' },
        placeholder: "请选择性别"
      }, [
        h(ElOption, { value: "", label: "全部" }),
        h(ElOption, { value: "男", label: "男" }),
        h(ElOption, { value: "女", label: "女" })
      ])
  },
  {
    prop: "url",
    label: "头像",
    h: (row) =>
      h(ElImage, {
        src: row.url,
        previewSrcList: [row.url],
        previewTeleported: true,
        style: { width: "60px", height: "60px" }
      })
  },
  {
    prop: "status",
    label: "状态",
    h: (row) =>
      h(ElSwitch, {
        modelValue: row.status,
        "onUpdate:modelValue": (val) => {
          row.status = val;
          console.log("状态更新:", val);
        }
      })
  },
  {
    label: "操作",
    fixed: "right",
    h: (row) =>
      h("div", {}, [
        h(
          ElButton,
          {
            props: { size: "small", type: "primary" },
            on: { click: () => console.log("添加", row) }
          },
          "添加"
        ),
        h(
          ElButton,
          {
            props: { size: "small", type: "danger" },
            on: { click: () => console.log("删除", row) }
          },
          "删除"
        )
      ])
  }
]);

// 请求处理函数（模拟数据）
const handleRequest = ({ pagination, callback, searchForm }) => {
  setTimeout(() => {
    const mockData = Array.from({ length: 10 }, (_, i) => ({
      name: `用户${i + 1}`,
      sex: i % 2 === 0 ? "男" : "女",
      age: 20 + i,
      status: i % 2 === 0,
      url: "https://pic35.photophoto.cn/20150511/0034034892281415_b.jpg "
    }));

    callback({
      data: mockData,
      total: 50
    });
  }, 500);
};
</script>

<template>
  <pro-table :columns="columns" @request="handleRequest" :is-pagination="true" />
</template>

📋 方法说明

| onSearch() | 触发一次搜索请求 | | ------------ | ------------------------------------------------- | | onReset() | 重置所有搜索条件，并重新加载数据 | | v-model | 所有搜索字段都双向绑定到searchForm[column.prop] |