Select Table
表格选择组件
注意
rowKey为必填项，不同于 Element-Plus, 现在仅支持字符串不支持函数。目前不支持树形选择。
提示
当 mode 为 single 时，value 为单个值；当 mode 为 multiple 时，value 为数组。
MarkupSchema 多选示例
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import { SelectTable, Submit } from '@silver-formily/element-plus'
const form = createForm()
const { SchemaField, SchemaStringField } = createSchemaField({
components: {
SelectTable,
},
})
async function log(value) {
console.log(value)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaStringField
name="selectTable"
x-component="SelectTable"
:x-component-props="{
mode: 'multiple',
rowKey: 'key',
columns: [
{ prop: 'name', label: '标题' },
{ prop: 'description', label: '描述' },
],
}"
:enum="[
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '2', name: 'title-2', description: 'description-2' },
{ key: '3', name: 'title-3', description: 'description-3' },
]"
/>
</SchemaField>
<Submit style="margin-top: 30px;" @submit="log">
提交
</Submit>
</FormProvider>
</template>MarkupSchema 多选示例
多选配合插槽使用
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import { SelectTable, Submit } from '@silver-formily/element-plus'
import { ElTableColumn } from 'element-plus'
import { h } from 'vue'
const form = createForm()
const { SchemaField, SchemaStringField } = createSchemaField({
components: {
SelectTable,
},
})
async function log(value) {
console.log(value)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaStringField
name="selectTable" x-component="SelectTable" :x-component-props="{
multiple: true,
rowKey: 'key',
}" :enum="[
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '2', name: 'title-2', description: 'description-2' },
{ key: '3', name: 'title-3', description: 'description-3' },
]" :x-content="{
default: () => [
h(ElTableColumn, {
prop: 'name',
label: 'Title',
}),
h(ElTableColumn, {
prop: 'description',
label: 'Description',
}, {
default: ({ row }) => `${row.description} - 通过插槽渲染`,
})],
}"
/>
</SchemaField>
<Submit style="margin-top: 30px;" @submit="log">
提交
</Submit>
</FormProvider>
</template>JSONSchema 多选示例
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import { SelectTable, Submit } from '@silver-formily/element-plus'
const schema = {
type: 'object',
properties: {
select: {
'type': 'string',
'x-component': 'SelectTable',
'x-component-props': {
mode: 'multiple',
rowKey: 'key',
columns: [
{ prop: 'name', label: '标题' },
{ prop: 'description', label: '描述' },
],
},
'enum': [
{
key: '1',
name: 'title-1',
description: 'description-1',
},
{
key: '2',
name: 'title-2',
description: 'description-2',
},
{
key: '3',
name: 'title-3',
description: 'description-3',
},
],
},
},
}
const form = createForm()
const { SchemaField } = createSchemaField({
components: {
SelectTable,
},
})
async function log(value) {
console.log(value)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField :schema="schema" />
<Submit style="margin-top: 30px;" @submit="log">
提交
</Submit>
</FormProvider>
</template>JSONSchema 单选示例
单选，返回整行数据，隐藏提示工具条
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import { SelectTable, Submit } from '@silver-formily/element-plus'
const schema = {
type: 'object',
properties: {
select: {
'type': 'object',
'x-component': 'SelectTable',
'x-component-props': {
mode: 'single',
rowKey: 'key',
optionAsValue: true,
showAlertToolbar: false,
columns: [
{ prop: 'name', label: '标题' },
{ prop: 'description', label: '描述' },
],
},
'enum': [
{
key: '1',
name: 'title-1',
description: 'description-1',
},
{
key: '2',
name: 'title-2',
description: 'description-2',
},
{
key: '3',
name: 'title-3',
description: 'description-3',
},
],
'default': {
key: '2',
name: 'title-2',
description: 'description-2',
},
},
},
}
const form = createForm()
const { SchemaField } = createSchemaField({
components: {
SelectTable,
},
})
async function log(value) {
console.log(value)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField :schema="schema" />
<Submit style="margin-top: 30px;" @submit="log">
提交
</Submit>
</FormProvider>
</template>Template 单选示例
单选，仅返回选中的key
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { Field, FormProvider } from '@formily/vue'
import { SelectTable, Submit } from '@silver-formily/element-plus'
const form = createForm()
async function log(value) {
console.log(value)
}
</script>
<template>
<FormProvider :form="form">
<Field
name="selectTable"
:component="[
SelectTable,
{
mode: 'single',
rowKey: 'key',
columns: [
{ prop: 'name', label: '标题' },
{ prop: 'description', label: '描述' },
],
},
]"
:data-source="[
{
key: '1',
name: 'title-1',
description: 'description-1',
},
{
key: '2',
name: 'title-2',
description: 'description-2',
},
{
key: '3',
name: 'title-3',
description: 'description-3',
},
]"
/>
<Submit style="margin-top: 30px;" @submit="log">
提交
</Submit>
</FormProvider>
</template>Template 多选示例
多选，返回整行数据，使用插槽
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { Field, FormProvider } from '@formily/vue'
import { SelectTable, Submit } from '@silver-formily/element-plus'
const form = createForm()
async function log(value) {
console.log(value)
}
</script>
<template>
<FormProvider :form="form">
<Field
name="selectTable"
:component="[
SelectTable,
{
rowKey: 'key',
optionAsValue: true,
},
]"
:data-source="[
{
key: '1',
name: 'title-1',
description: 'description-1',
},
{
key: '2',
name: 'title-2',
description: 'description-2',
},
{
key: '3',
name: 'title-3',
description: 'description-3',
},
]"
>
<ElTableColumn prop="name" label="标题" />
</Field>
<Submit style="margin-top: 30px;" @submit="log">
提交
</Submit>
</FormProvider>
</template>Template 禁用勾选
例子展示了勾选条数超过2条时禁止勾选更多的写法
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { Field, FormProvider } from '@formily/vue'
import { SelectTable, Submit } from '@silver-formily/element-plus'
const form = createForm()
async function log(value) {
console.log(value)
}
function selectable(row: Record<string, any>, index: number, field) {
if (field.value === undefined) {
return true
}
return field.value?.length < 2 || row.key === field.value?.find(item => item.key === row.key)?.key
}
</script>
<template>
<FormProvider :form="form">
<Field
name="selectTable"
:component="[
SelectTable,
{
rowKey: 'key',
optionAsValue: true,
selectable,
},
]"
:data-source="[
{
key: '1',
name: 'title-1',
description: 'description-1',
},
{
key: '2',
name: 'title-2',
description: 'description-2',
},
{
key: '3',
name: 'title-3',
description: 'description-3',
},
]"
>
<ElTableColumn prop="name" label="标题" />
</Field>
<Submit style="margin-top: 30px;" @submit="log">
提交
</Submit>
</FormProvider>
</template>API
SelectTable Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| mode | 选择模式 | enum | multiple |
| columns | 表格列配置，配置参数可以参考官方文档 | array | [] |
| optionAsValue | 是否将整行数据作为选择值 | boolean | false |
| rowKey | 必填，行数据的唯一标识字段，element-plus中的属性值 | string | — |
| clickRowToSelect | 是否点击整行进行选择，如果需要对表格内局部添加点击事件需要禁用该配置项 | boolean | true |
| showAlertToolbar | 是否显示选择提示工具栏 | boolean | true |
| selectable 1.0.0 | 该函数的返回值用来决定这一行是否可以勾选 | Function | () => true |
| ignoreSelectable 1.0.0 | 是否显示选择提示工具栏 | boolean | true |
提示
onSelect、onSelectAll、onRowClick事件已被组件内部使用，请勿使用。其余属性与事件请参考官方文档，例如可以限制表格高度或者条纹等，但会有不推荐的配置项，例如应该用Formily的dataSource配置项来渲染表格数据而不是ElTable的data属性。
提示
在Element-Plus中位于 selection column上的 selectable的配置项被迁移至了Select Table上。并且额外添加了第三个入参：当前的field。如果有需要你可以通过Query语法获取整个Form的表单项的值。
在Element-Plus中用作勾选函数第三个入参的ignoreSelectable，现在作为Select Table的配置项。
Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义列的内容，一般情况下会搭配ElTableCoulum组件使用，具体参数请参考官方文档 |