RecordScope

描述

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

$record 当前记录数据
$record.$lookup 当前记录的父级记录，可以一直往上查找
$record.$index 当前记录的索引
$index 当前记录索引，等同于 $record.$index，考虑到记录数据如果不是对象，则需要独立读取
$lookup 当前记录的父级记录，等同于 $record.$lookup，考虑到记录数据如果不是对象，则需要独立读取

主要用于自增列表、表格等需要携带行数据递归渲染的场景，通常与 RecordsScope 搭配使用。

使用约定

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

用例

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { createSchemaField, FormProvider, RecordScope } from '@silver-formily/vue'
import { ElInput } from 'element-plus'
import { defineComponent, h } from 'vue'

const form = createForm()

// 自定义列表扩展组件内部用 RecordScope 传递记录作用域变量
const MyCustomComponent = defineComponent({
  name: 'MyCustomComponent',
  props: {
    record: Object,
    index: Number,
  },
  setup(props, { slots }) {
    return () =>
      h(RecordScope, {
        getRecord: () => props.record,
        getIndex: () => props.index,
      }, slots)
  },
})

const { SchemaField } = createSchemaField({
  components: {
    ElInput,
    MyCustomComponent,
  },
})

// 嵌套两层 MyCustomComponent，演示 $record / $index / $lookup 层层向上的完整变量链
const schema = {
  type: 'object',
  properties: {
    lookup: {
      'type': 'void',
      'x-component': 'MyCustomComponent',
      'x-component-props': {
        record: {
          name: 'Lookup Name',
          code: 'Lookup Code',
        },
        index: 1,
      },
      'properties': {
        record: {
          'type': 'void',
          'x-component': 'MyCustomComponent',
          'x-component-props': {
            record: {
              name: 'Name',
              code: 'Code',
            },
            index: 0,
          },
          'properties': {
            input: {
              'type': 'string',
              'x-component': 'ElInput',
              'x-value': `{{\`\${$record.name} \${$record.code} \${$record.$index} \${$record.$lookup.name} \${$record.$lookup.code} \${$index} \${$lookup.name} \${$lookup.code} \`}}`,
            },
          },
        },
      },
    },
  },
}
</script>

<template>
  <FormProvider :form="form">
    <SchemaField :schema="schema" />
  </FormProvider>
</template>

查看源码

API

属性	说明	类型	默认值
getRecord	返回当前行记录的函数	`Function`	-
getIndex	返回当前行索引的函数	`Function`	-

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

RecordScope ​

描述 ​

使用约定 ​

用例 ​

API ​

RecordScope

描述

使用约定

用例

API