表单字段动态属性配置

场景：假设下图性别不同，展示的课程选项就不同。在FormSchema 中该如何实现呢？

在formSchemas中使用dynamicPropskey、dynamicPropsVal

使用方法：

dynamicPropskey 和 dynamicPropsVal 必须配合使用，缺一不可。

	类型
dynamicPropskey	string
dynamicPropsVal	function

效果：

实现代码：

<template>
  <BasicForm
    ref="formElRef"
    :class="'jee-select-demo-form'"
    :labelCol="{ span: 5 }"
    :wrapperCol="{ span: 15 }"
    :showResetButton="false"
    :showSubmitButton="false"
    :schemas="schemas"
    :actionColOptions="{ span: 24 }"
    style="height: 100%"
  >
  </BasicForm>
</template>
<script lang="ts">
  import { computed, defineComponent, unref, ref } from 'vue';
  import { BasicForm } from '/@/components/Form';
  import { schemas } from './jeecgComponents.data';

  export default defineComponent({
    components: {
      BasicForm,
    },
    name: 'JeecgComponents',
    setup() {
      const schemas = [
        {
          field: 'sex',
          component: 'JDictSelectTag',
          label: '性别选择',
          helpMessage: ['component模式'],
          componentProps: {
            dictCode: 'sex',
            type: 'radioButton',
            onChange: (value) => {
              console.log(value);
            },
          },
          colProps: {
            span: 12,
          },
        },
        {
          field: 'sex',
          component: 'JEllipsis',
          label: '选中值',
          colProps: { span: 12 },
        },

        {
          field: 'course',
          component: 'Select',
          label: '课程',
          dynamicPropskey: 'options',
          dynamicPropsVal: ({ model }) => {
            let options;
            if (model.sex == 1) {
              return [
                { value: '0', label: 'java - 男' },
                { value: '1', label: 'vue - 男' },
              ];
            } else {
              return [
                { value: '2', label: '瑜伽 - 女' },
                { value: '3', label: '美甲 - 女' },
              ];
            }
          },
          componentProps: {
            disabled: false,
          },
          colProps: {
            span: 12,
          },
        },
        {
          field: 'course',
          component: 'JEllipsis',
          label: '选中值',
          colProps: { span: 12 },
        },
      ];
      return {
        schemas,
      };
    },
  });
</script>