TableSelect 表格选择器

通过弹窗表格选择数据，支持单选和多选。在线演示

基础用法

<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[]) {
  selectedText.value = selection.map(item => item.username).join(',')
}
</script>

多选模式

<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: '昵称' }
  ]
}
</script>

自定义触发器

<TableSelect :select-config="selectConfig" @confirm-click="handleConfirm">
  <el-button type="primary">选择用户</el-button>
</TableSelect>

自定义表格列

<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>

<script setup lang="ts">
const selectConfig = {
  indexAction: UserAPI.getPage,
  formItems: [
    { type: 'input', label: '关键字', prop: 'keywords' }
  ],
  tableColumns: [
    { type: 'selection', width: 50 },
    { prop: 'username', label: '用户名' },
    { prop: 'status', label: '状态', templet: 'custom', slotName: 'status' }
  ]
}
</script>

Props

参数	说明	类型	默认值
selectConfig	选择器配置	ISelectConfig	—
text	显示文本	string	''

selectConfig 配置

参数	说明	类型	默认值
width	组件宽度	string	'100%'
placeholder	占位文本	string	'请选择'
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
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]	自定义表格列内容