基本使用
# 基本使用
TableSelect 是一个基于 el-select 和 sc-crud 封装的表格选择器组件,提供了丰富的选择功能和灵活的数据格式支持。它可以在下拉框中显示表格数据,支持单选和多选模式,以及多种输入输出格式。
# 值类型支持
TableSelect 通过 basicType 参数配置输入输出值类型:
- 单选模式:支持对象格式和基本类型(ID)
- 多选模式:支持对象数组和基本类型数组(ID 数组)
# 搜索功能
TableSelect 组件支持本地搜索和远程搜索:
- 本地搜索:
filterable属性默认启用且默认开启表格本地搜索,支持配置filterMethod自定义搜索方法 - 远程搜索:通过
remote和 搜索参数search.sync实现
# 弹窗模式
可以通过useDialog属性配置弹窗模式展示表格:
# 自定义内容
支持在下拉、弹窗内容的上下左右位置添加自定义内容。同样也继承了sc-crud的所有插槽。
# API 文档
继承 el-select 组件与 sc-crud 组件的 API
# 属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value / v-model | 绑定值,支持多种格式 | Array / Object / String / Number | null |
| loading | 是否显示加载中 | Boolean | false |
| multiple | 是否多选 | Boolean | false |
| search | 远程搜索参数 | Object | {} |
| data | 表格数据 | Array | [] |
| total | 数据总数-远程分页 | Number | 0 |
| columns | 表格列配置 | Array | [] |
| tableOptions | 表格配置项 | Object | {} |
| labelKey | 显示的标签字段 | String | 'label' |
| valueKey | 值字段 | String | 'id' |
| searchKey | 输入框远程搜索的字段 | String | 默认等于 labelKey |
| filterable | 是否可搜索 | Boolean | true |
| filterMethod | 自定义本地搜索方法 | Function | null |
| remote | 是否开启远程搜索 | Boolean | false |
| remoteMethod | 自定义远程搜索方法 | Function | null |
| basicType | 是否使用基本类型作为输出格式 | Boolean | false |
| useDialog | 是否使用弹窗模式展示表格 | Boolean | false |
| dialogOptions | 弹窗配置 | Object | {} |
# Slots
| 插槽名 | 说明 | 作用域参数 |
|---|---|---|
| content-[position] | 自定义内容 | { } |
注:
[position]可以是top、bottom、left、right