表单字段改变后怎么根据改变字段的值通过接口获取另一个字段的options?

[RJQingHuan]

表单字段改变后,需要通过改变的值获取另一个字段的options,怎么实现比较好?

[kobetwenty-four]

不太理解你的表述，有代码或者简图吗？

[RJQingHuan]

在这个截图中,课程类别,课程性质的options是和课程层次选择的值相关的.

如果课程层次选择的值发生改变,同时课程类别,课程性质的options也需要发生改变.需要根据课程层次的值调用接口获取对应的options

在PlusForm中可以通过columns配置实现吗?

[kobetwenty-four]

<template>
  <el-card>
    <PlusForm v-model="state" label-width="140px" :columns="columns" @change="handleChange" />
  </el-card>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import type { PlusColumn, FieldValues, OptionsRow } from '@plus-pro-components/types'

const state = ref<FieldValues>({
  'select-one': '0',
  'select-two': ''
})

const optionsTwo = ref<OptionsRow[]>([])

const columns: PlusColumn[] = [
  {
    label: 'select-one',
    width: 120,
    prop: 'select-one',
    valueType: 'select',
    options: [
      {
        label: '未解决',
        value: '0',
        color: 'red'
      },
      {
        label: '已解决',
        value: '1',
        color: 'blue'
      },
      {
        label: '解决中',
        value: '2',
        color: 'yellow'
      },
      {
        label: '失败',
        value: '3',
        color: 'red'
      }
    ]
  },
  {
    label: 'select-two',
    width: 120,
    prop: 'select-two',
    valueType: 'select',
    options: computed(() => optionsTwo.value)
  }
]

const getOptionTwoList = async (getOptionsTag: string) => {
  const options =
    getOptionsTag === '1'
      ? [
          {
            label: '张三-one',
            value: '0'
          },
          {
            label: '李四-one',
            value: '1'
          }
        ]
      : [
          {
            label: '张三-two',
            value: '0'
          },
          {
            label: '李四-two',
            value: '1'
          }
        ]
  await new Promise(resolve => {
    setTimeout(() => {
      resolve('')
    }, 1000)
  })
  return options
}

const handleChange = async (values: FieldValues, column: PlusColumn) => {
  console.log(values, column, 'change')
  if (column.prop === 'select-one') {
    /**
     * 需求：当select-one   选择 1：已解决  select-two options 为一组数据
     * 选择 2：解决中  select-two options 为另一组数据
     **/
    if (values['select-one'] === '1') {
      optionsTwo.value = await getOptionTwoList('1')
    } else if (values['select-one'] === '2') {
      optionsTwo.value = await getOptionTwoList('2')
    }
  }
}
</script>

[RJQingHuan]

@kobetwenty-four 感谢