表格数据选择器组件

概述

TableSelector 是一个通用的表格数据选择器组件，支持从多种数据源（静态数据、字典、数据源、表单数据、API）中选择数据，通过弹窗表格展示，支持搜索、分页、单选/多选。

组件路径：web/apps/web-ele/src/components/zq-form/table-selector/

组件名称：TableSelector

功能特性

• 多数据源支持：静态数据、字典、数据源、表单数据、自定义 API
• 表格展示：自定义列配置
• 支持单选/多选模式
• 支持搜索过滤
• 分页加载
• 行点击选择
• 标签折叠显示

Props

属性	类型	默认值	说明
modelValue	string | string[]	-	选中的值
multiple	boolean	false	是否多选
placeholder	string	'点击选择'	占位符
disabled	boolean	false	是否禁用
clearable	boolean	true	是否可清除
dialogTitle	string	'选择数据'	弹窗标题
dialogWidth	string	'800px'	弹窗宽度
columns	TableSelectorColumn[]	[]	表格列配置
labelField	string	'label'	显示字段名
valueField	string	'value'	值字段名
dataSourceType	string	'static'	数据源类型
dictCode	string	-	字典编码（dict 类型）
dataSourceCode	string	-	数据源编码（dataSource 类型）
formCode	string	-	表单编码（formData 类型）
apiUrl	string	-	API 地址（api 类型）
apiMethod	'GET' | 'POST'	'GET'	API 请求方法
searchFields	string[]	[]	搜索字段
collapseTags	boolean	false	是否折叠标签
options	Array	[]	静态数据选项

数据源类型

类型	说明	必需参数
static	静态数据	options
dict	字典数据	dictCode
dataSource	数据源	dataSourceCode
formData	表单数据	formCode
api	自定义 API	apiUrl

Events

事件	参数	说明
update:modelValue	string | string[]	值更新
change	string | string[]	值变化
blur	-	失焦
select-item	object | object[]	选中项完整数据

使用示例

静态数据

<template>
  <TableSelector
    v-model="selectedValue"
    :options="options"
    :columns="columns"
    label-field="name"
    value-field="id"
  />
</template>

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

const selectedValue = ref('');
const options = [
  { id: '1', name: '选项一', code: 'A' },
  { id: '2', name: '选项二', code: 'B' },
];
const columns = [
  { field: 'name', label: '名称' },
  { field: 'code', label: '编码' },
];
</script>

字典数据

<template>
  <TableSelector
    v-model="selectedValue"
    data-source-type="dict"
    dict-code="sys_status"
    label-field="label"
    value-field="value"
  />
</template>

表单数据

<template>
  <TableSelector
    v-model="selectedValue"
    data-source-type="formData"
    form-code="customer"
    :columns="columns"
    :search-fields="['name', 'code']"
    label-field="name"
    value-field="id"
  />
</template>

自定义 API

<template>
  <TableSelector
    v-model="selectedValue"
    data-source-type="api"
    api-url="/api/custom/list"
    api-method="GET"
    :columns="columns"
  />
</template>

与表单设计器集成

在表单设计器中，该组件作为 table-selector 类型的表单项使用：

{
  "type": "table-selector",
  "field": "product_id",
  "label": "产品",
  "props": {
    "dataSourceType": "formData",
    "formCode": "product",
    "multiple": false,
    "valueField": "id",
    "labelField": "name",
    "columns": [
      { "field": "name", "label": "产品名称" },
      { "field": "code", "label": "产品编码" },
      { "field": "price", "label": "价格" }
    ]
  }
}

典型应用场景

• 数据选择：从各种数据源选择数据
• 关联字段：配合 linked-field 实现级联显示
• 字典选择：以表格形式展示字典数据