TableSelect 表格选择器
表格选择器组件，支持单选和多选，通过弹窗表格选择数据。
基本用法
vue
<template>
<TableSelect
v-model="selectedText"
:select-config="selectConfig"
@confirm-click="handleConfirm"
/>
</template>
<script setup lang="ts">
import UserAPI from '@/api/system/user'
const selectedText = ref('')
const selectConfig = {
// 宽度
width: '100%',
// 占位符
placeholder: '请选择用户',
// 是否多选
multiple: false,
// 主键字段（跨页选择必填）
pk: 'id',
// 列表请求接口
indexAction: UserAPI.getPage,
// 搜索表单项
formItems: [
{
type: 'input',
label: '关键字',
prop: 'keywords',
attrs: { placeholder: '用户名/昵称/手机号' }
}
],
// 表格列配置
tableColumns: [
{ type: 'selection', width: 50 },
{ prop: 'username', label: '用户名' },
{ prop: 'nickname', label: '昵称' },
{ prop: 'mobile', label: '手机号' }
]
}
function handleConfirm(selection: any[]) {
console.log('选中的数据:', selection)
selectedText.value = selection.map(item => item.username).join(',')
}
</script>多选模式
vue
<template>
<TableSelect
:select-config="selectConfig"
@confirm-click="handleConfirm"
/>
</template>
<script setup lang="ts">
const selectConfig = {
multiple: true, // 开启多选
pk: 'id',
indexAction: UserAPI.getPage,
formItems: [
{ type: 'input', label: '关键字', prop: 'keywords' }
],
tableColumns: [
{ type: 'selection', width: 50 },
{ prop: 'username', label: '用户名' },
{ prop: 'nickname', label: '昵称' }
]
}
function handleConfirm(selection: any[]) {
console.log('选中了', selection.length, '条数据')
}
</script>自定义触发器
使用默认插槽自定义触发器：
vue
<template>
<TableSelect :select-config="selectConfig" @confirm-click="handleConfirm">
<el-button type="primary">选择用户</el-button>
</TableSelect>
</template>自定义表格列
vue
<template>
<TableSelect :select-config="selectConfig" @confirm-click="handleConfirm">
<!-- 自定义状态列 -->
<template #status="{ row }">
<el-tag :type="row.status === 1 ? 'success' : 'danger'">
{{ row.status === 1 ? '启用' : '禁用' }}
</el-tag>
</template>
</TableSelect>
</template>
<script setup lang="ts">
const selectConfig = {
indexAction: UserAPI.getPage,
formItems: [
{ type: 'input', label: '关键字', prop: 'keywords' }
],
tableColumns: [
{ type: 'selection', width: 50 },
{ prop: 'username', label: '用户名' },
{ prop: 'nickname', label: '昵称' },
{
prop: 'status',
label: '状态',
templet: 'custom',
slotName: 'status' // 对应插槽名
}
]
}
</script>Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| selectConfig | 选择器配置 | ISelectConfig | - |
| text | 显示文本 | string | '' |
selectConfig 配置
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 组件宽度 | string | '100%' |
| placeholder | 占位文本 | string | '请选择' |
| popover | Popover 组件属性 | object | - |
| pk | 主键字段（跨页选择必填） | string | 'id' |
| multiple | 是否多选 | boolean | false |
| indexAction | 列表请求函数 | (params) => Promise | - |
| formItems | 搜索表单项配置 | FormItem[] | [] |
| tableColumns | 表格列配置 | TableColumn[] | [] |
formItems 配置
| 参数 | 说明 | 类型 |
|---|---|---|
| type | 组件类型：input / select / tree-select / date-picker | string |
| label | 标签文本 | string |
| prop | 字段名 | string |
| attrs | 组件属性 | object |
| initialValue | 初始值 | any |
| options | 选项（select 使用） | { label, value }[] |
tableColumns 配置
| 参数 | 说明 | 类型 |
|---|---|---|
| type | 列类型：selection / index / expand | string |
| prop | 字段名 | string |
| label | 列标题 | string |
| width | 列宽度 | string | number |
| templet | 模板类型：custom 使用插槽 | string |
| slotName | 插槽名称 | string |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| confirm-click | 确认选择时触发 | (selection: any[]) |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义触发器 |
| [slotName] | 自定义表格列内容 |
功能特性
- ✅ 单选/多选模式
- ✅ 分页加载
- ✅ 搜索筛选
- ✅ 跨页选择（多选时保留选中状态）
- ✅ 自定义触发器
- ✅ 自定义表格列
使用场景
- 选择用户
- 选择部门
- 选择角色
- 选择商品
- 任何需要弹窗选择的场景