[Bug Report] formily 中无法使用timepick的range 无法选择

ssnfk commented 1 week ago

Element UI version

2.15.14

OS/Browsers version

windows egde

Vue version

2.7.16

Reproduction Link

https://codesandbox.io/s/tmmm85?file=/src/App.vue

Steps to reproduce

https://github.com/alibaba/formily/issues/3241

What is Expected?

选则时间进行回显正确显示

What is actually happening?

选则时间无法正确显示

wangdaodao commented 1 week ago

报错不影响数据回显，明显是你对formily使用错误，并且官方的文档示例也是错的。https://element.formilyjs.org/guide/time-picker.html#json-schema-%E6%A1%88%E4%BE%8B

你把代码改成这样看看：

<template>
  <FormProvider :form="form">
    <SchemaField>
      <SchemaStringField
        name="time"
        title="时间"
        required
        x-decorator="FormItem"
        x-component="TimePicker"
        :x-component-props="{
          style: {
            width: '240px',
          },
        }"
      />
      <SchemaStringField
        name="timeRange"
        title="时间范围"
        x-decorator="FormItem"
        x-component="TimePicker"
        :x-component-props="{
          isRange: true,
          style: {
            width: '240px'
          },
        }"
      />
    </SchemaField>
    <Submit @submit="log">提交</Submit>
  </FormProvider>
</template>

<script>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import { FormItem, TimePicker, Submit } from '@formily/element'

const form = createForm()
const fields = createSchemaField({
  components: {
    FormItem,
    TimePicker,
  },
})

export default {
  components: { FormProvider, ...fields, Submit },
  data() {
    return {
      form,
    }
  },
  methods: {
    log(value) {
      console.log(value)
    },
  },
}
</script>

ssnfk commented 3 days ago

感谢，你的方法是可以的。但是formily/element-ui plus 和 formily/antd 都是使用 [startTime,endTime] 的写法，并且显示是正常的。这个应该是个解构赋值这是 element ui plus 的输出

wangdaodao commented 3 days ago