RecordsScope

描述

标准作用域注入组件，向子树的 Schema 表达式注入以下内置变量：

$records 当前记录列表数据

通常与 RecordScope 搭配使用：RecordsScope 为整张列表提供数据源，RecordScope 在渲染每一行时注入当前行记录。

使用约定

任何自增列表扩展组件，内部都应该使用 RecordsScope，用于传递记录作用域变量。

用例

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

属性	说明	类型	默认值
getRecords	返回当前记录集合的函数	`Function`	-

RecordsScope 通过默认插槽渲染子节点。

RecordsScope ​

描述 ​

使用约定 ​

用例 ​

API ​

RecordsScope

描述

使用约定

用例

API