Vue Element Search Table

基于 Vue 3 + Element Plus 的高封装搜索列表组件，集成了搜索栏、表格、分页和操作栏。通过配置化方式快速生成列表页，支持丰富的自定义插槽和事件回调。

✨ 特性

• 🚀 配置化驱动：通过 JSON 配置自动生成搜索表单和表格列。
• 🔍 丰富的搜索控件：支持 Input, Select, DatePicker, Cascader 等多种控件。
• 🎨 灵活的插槽：支持自定义列内容、操作栏按钮等。
• 📄 内置分页：集成分页逻辑，简化父组件代码。
• 🛠 高度可定制：支持表格多选、排序、拖拽（需自行集成拖拽库）、序号列等。

📦 快速上手

基础用法

<template>
  <SerchTable
    :search-form="searchForm"
    :table-label="tableLabel"
    :table-data="tableData"
    :total="total"
    :page-size="pageSize"
    :current-page="currentPage"
    @handleSearch="handleSearch"
  >
    <!-- 自定义列插槽 -->
    <template #status="{ row }">
      <el-tag>{{ row.statusName }}</el-tag>
    </template>

    <!-- 操作栏插槽 -->
    <template #buttons="{ row }">
      <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
    </template>
  </SerchTable>
</template>

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

const searchForm = ref([
  { type: 'input', key: 'name', name: '姓名', placeholder: '请输入姓名', vModel: '' }
])

const tableLabel = ref([
  { key: 'name', title: '姓名' },
  { key: 'status', title: '状态' }
])

const tableData = ref([])
const total = ref(0)
const pageSize = ref(10)
const currentPage = ref(1)

const handleSearch = (page, condition, params, size) => {
  // 调用接口获取数据
}
</script>

📖 API 文档

Props (属性)

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | searchForm | 搜索表单配置数组 | Array | [] | | tableLabel | 表格列配置数组 (必填) | Array | [] | | tableData | 表格数据数组 (必填) | Array | [] | | total | 数据总条数 | Number | 0 | | pageSize | 每页显示条数 | Number | 20 | | currentPage | 当前页码 | Number | 1 | | vLoading | 表格加载状态 | Boolean | false | | showSearch | 是否显示搜索区域 | Boolean | true | | showAdvancedSearch | 是否显示高级搜索 | Boolean | false | | labelWidth | 搜索表单标签宽度 | String | "70px" | | singleLineNumber | 单行显示的搜索项数量 | Number | 3 | | labelPosition | 搜索表单标签对齐方式 | String | "right" | | styleChange | 是否启用样式变更模式 | Boolean | false | | isDialogNoHeight | 是否用于弹窗（影响高度计算） | Boolean | true | | showCheckCol | 是否显示列显示控制 | Boolean | true | | tableDrag | 是否启用表格拖拽排序 | Boolean | false | | isSearchForm | 是否渲染搜索表单 | Boolean | true | | sortChange | 排序变更回调函数 | Function | () => {} | | chackedLable | 默认选中的列 | Array | [] | | checkedList | 列显示控制列表 | Array | [] | | tableButton | 表格操作列按钮配置 | Array | [] | | handleName | 操作列标题 | String | "操作" | | border | 是否显示表格边框 | Boolean | false | | showMove | 是否显示移动图标 | Boolean | false | | fixed | 操作列固定位置 | String | "right" | | controlWidth | 操作列宽度 | Number | String | 160 | | minWidth | 操作列最小宽度 | Number | String | 160 | | delUrl | 删除接口地址 | String | - | | delParamType | 删除参数类型 | String | "" | | btnJurisdiction | 是否启用按钮权限控制 | Boolean | false | | isShowTip | 是否显示提示 | Boolean | true | | fixHeight | 是否固定高度 | Boolean | true | | showOperate | 是否显示操作区域 | Boolean | true | | showAdd | 是否显示新增按钮 | Boolean | true | | batchDelete | 是否显示批量删除 | Boolean | true | | selectionBtn | 是否显示选择按钮 | Boolean | false | | selection | 是否开启多选 | Boolean | false | | showSerialNumber | 是否显示序号列 | Boolean | true | | lastSelection | 是否显示最后一列的选择框 | Boolean | false | | selectionCompany | 是否显示企业选择 | Boolean | false | | isSelectionDisabled | 是否禁用选择 | Boolean | false | | checkboxT | 复选框禁用函数 | Function | () => 1 | | isRadio | 是否开启单选模式 | Boolean | false | | headTopPx | 顶部高度偏移 | Number | 0 | | rowKey | 行数据的 Key | String | "id" | | tdClassName | 单元格类名 | String | "" |

Events (事件)

| 事件名称 | 说明 | 回调参数 | | --- | --- | --- | | handleSearch | 点击查询或分页切换时触发 | (page, condition, params, size) | | handleCurrentPage | 切换页码时触发 | (page, condition, params, size) | | handle-new-add-click | 点击默认新增按钮时触发 | - | | handle-delete-click | 点击默认批量删除按钮时触发 | - | | delete-item | 确认删除时触发 | (ids) | | tableSelectionChange | 表格多选状态改变时触发 | (selection) | | henderDragList | 表格行拖拽排序结束时触发 | (targetRow, evt) | | handleClick | 点击表格内按钮时触发 | (btnName, row) | | resetSearchForm | 重置搜索表单时触发 | - | | sort-change | 表格排序改变时触发 | ({ column, prop, order }) |

Slots (插槽)

| 插槽名称 | 说明 | | --- | --- | | operateArea | 自定义顶部操作区域（替换默认新增/删除按钮） | | buttons | 自定义操作列按钮 | | [prop] | 动态列插槽，插槽名为 tableLabel 中的 key | | custom_widget | 自定义搜索表单项插槽 | | custom_widget1 | 自定义搜索表单项插槽1 | | custom_widget2 | 自定义搜索表单项插槽2 | | radioItem | 自定义单选列内容 | | custom_map | 自定义地图区域插槽 |

⚙️ 核心配置项详解

1. searchForm (搜索表单配置)

数组中每个对象代表一个搜索项。

通用字段：

| 字段名 | 说明 | 必填 | | --- | --- | --- | | type | 控件类型 | 是 | | key | 绑定的字段名 | 是 | | name | 表单项 Label 名称 | 是 | | vModel | 双向绑定的初始值 | 是 | | placeholder | 占位提示文字 | - |

支持的 type 类型及特有配置：

| type 值 | 控件说明 | 特有字段 | 示例 | | --- | --- | --- | --- | | input | 普通文本输入框 | placeholder | { type: 'input', key: 'name', ... } | | select | 下拉选择框 | data: [{name, id}] | { type: 'select', data: [...], ... } | | daterange | 日期范围选择 | valueFormat, startPlaceHolder, endPlaceHolder | { type: 'daterange', valueFormat: 'YYYY-MM-DD', ... } | | date | 单个日期选择 | valueFormat | { type: 'date', valueFormat: 'YYYY-MM-DD', ... } | | datetime | 日期时间选择 | valueFormat | { type: 'datetime', valueFormat: 'YYYY-MM-DD HH:mm:ss', ... } | | datetimerange | 日期时间范围选择 | valueFormat, startPlaceHolder, endPlaceHolder | { type: 'datetimerange', ... } | | timeRange | 时间范围选择 | valueFormat, startPlaceHolder, endPlaceHolder | { type: 'timeRange', ... } | | cascader | 级联选择器 | data (树形结构), props (配置项) | { type: 'cascader', data: [...], ... } | | radio | 单选框 | data: [{name, id}] | { type: 'radio', data: [...], ... } | | checkbox | 多选框 | data: [{name, id}] | { type: 'checkbox', data: [...], ... } | | inputrange | 数值范围输入 | placeholders: [min, max] | { type: 'inputrange', ... } | | percentage | 百分比输入 | - | { type: 'percentage', ... } | | custom_widget | 自定义插槽控件 | slotName (插槽名) | { type: 'custom_widget', slotName: 'mySlot', ... } | | twodate | 自定义双日期输入 | - | { type: 'twodate', ... } |

2. tableLabel (表格列配置)

数组中每个对象代表一列。

| 字段名 | 说明 | 必填 | | --- | --- | --- | | key | 对应 tableData 中的属性名，也作为插槽名 | 是 | | title | 表头标题 | 是 | | width | 列宽 (px) | - | | minWidth | 最小列宽 | - | | align | 对齐方式 (left, center, right) | - | | sortable | 是否开启排序 | - | | options | 字典映射 [{id:1, name:'男'}] | - |