RecordsScope
Description
Standard scoped injection component, injecting the following built-in variable into the Schema expressions of the subtree:
$recordscurrent record list data
Usually used together with RecordScope: RecordsScope provides the data source for the whole list, and RecordScope injects the current row record when each row is rendered.
Usage Convention
Any auto-incrementing list extension component should use RecordsScope internally to pass record scope variables.
Usage
vue
<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { createSchemaField, FormProvider, RecordsScope } from '@silver-formily/vue'
import { ElInput } from 'element-plus'
import { defineComponent, h } from 'vue'
const form = createForm()
// 自定义列表扩展组件内部用 RecordsScope 传递记录作用域变量
const MyCustomComponent = defineComponent({
name: 'MyCustomComponent',
props: {
records: Array,
},
setup(props, { slots }) {
return () =>
h(RecordsScope, {
getRecords: () => props.records,
}, slots)
},
})
const { SchemaField } = createSchemaField({
components: {
ElInput,
MyCustomComponent,
},
})
const schema = {
type: 'object',
properties: {
records: {
'type': 'void',
'x-component': 'MyCustomComponent',
'x-component-props': {
records: [
{
name: 'Name',
code: 'Code',
},
],
},
'properties': {
input: {
'type': 'string',
'x-component': 'ElInput',
'x-value': `{{\`\${$records[0].name} \${$records[0].code} \`}}`,
},
},
},
},
}
</script>
<template>
<FormProvider :form="form">
<SchemaField :schema="schema" />
</FormProvider>
</template>vue
<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { createSchemaField, FormProvider, RecordsScope } from '@silver-formily/vue'
import { ElInput } from 'element-plus'
import { defineComponent, h } from 'vue'
const form = createForm()
// 自定义列表扩展组件内部用 RecordsScope 传递记录作用域变量
const MyCustomComponent = defineComponent({
name: 'MyCustomComponent',
props: {
records: Array,
},
setup(props, { slots }) {
return () =>
h(RecordsScope, {
getRecords: () => props.records,
}, slots)
},
})
const { SchemaField } = createSchemaField({
components: {
ElInput,
MyCustomComponent,
},
})
const schema = {
type: 'object',
properties: {
records: {
'type': 'void',
'x-component': 'MyCustomComponent',
'x-component-props': {
records: [
{
name: 'Name',
code: 'Code',
},
],
},
'properties': {
input: {
'type': 'string',
'x-component': 'ElInput',
'x-value': `{{\`\${$records[0].name} \${$records[0].code} \`}}`,
},
},
},
},
}
</script>
<template>
<FormProvider :form="form">
<SchemaField :schema="schema" />
</FormProvider>
</template>查看源码
API
| Attribute | Description | Type | Default |
|---|---|---|---|
| getRecords | Function that returns the current record collection | Function | - |
RecordsScope renders child nodes through the default slot.