Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: ElInputTab el-input-tag 组件在表单中的使用问题 #5144

Closed
5 tasks done
eamd-wq opened this issue Dec 15, 2024 · 3 comments · Fixed by #5146
Closed
5 tasks done

Bug: ElInputTab el-input-tag 组件在表单中的使用问题 #5144

eamd-wq opened this issue Dec 15, 2024 · 3 comments · Fixed by #5146

Comments

@eamd-wq
Copy link
Contributor

eamd-wq commented Dec 15, 2024

Version

Vben Admin V5

Describe the bug?

在表单中使用 el-input-tag 组件,无论是自定义组件还是在adapter/component/index中注册,都会出现值绑定的混乱
期望输入 baidu.com 回车后返回 baidu.com
但实际效果如下图
image
代码: 主要代码 schema

const [Form, formApi] = useVbenForm({
  // 所有表单项共用,可单独在表单内覆盖
  commonConfig: {
    disabledOnChangeListener: true,
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  // 提交函数
  handleSubmit: onSubmit,
  layout: 'vertical',
  schema: [
    {
      component: h(ElInputTag, null, ''),
      fieldName: 'domains',
      label: '域名',
      rules: 'required',
    },
  ],
  wrapperClass: 'grid-cols-1',
});

Element Version : element-plus: ^2.9.0

Reproduction

null

System Info

Windows 10

Relevant log output

No response

Validations

@mynetfan
Copy link
Collaborator

更新到最新代码。这个问题应该在下面这个commit中解决了:
698daf4
请先尝试一下,如果有问题回复一下

Copy link

Hello @eamd-wq. Please provide the complete reproduction steps and code. Issues labeled by needs reproduction will be closed if no activities in 3 days.

@eamd-wq
Copy link
Contributor Author

eamd-wq commented Dec 15, 2024

更新到最新代码。这个问题应该在下面这个commit中解决了: 698daf4 请先尝试一下,如果有问题回复一下

Input的问题被修复了,已经在我的项目里得到验证了;但是 ElRadioGroup 依然会存在相同问题(可能是这类事件的原因 onChange)
但是我添加 disabledOnInputListener disabledOnChangeListener 为true 没有任何作用;

具体情况:
如果创建一个自定义组件,注册在adapter/component/index中,并在VbenForm中使用,像是这样:

schema: [
    {
      component: 'DnsConfig',
      fieldName: 'desConfig',
    },
  ]

这个自定义组件中包含了一个Input组件和一个RedioGroup组件;之前的版本两个组件的修改都会导致model发生变化,现在的版本中Input已经正常,但是RedioGroup的交互还是会触发model的改变;因为这是一个自定义组件,参数的双向数据绑定应该由自定义组件来决定,现在这个自定义组件中的子组件的值发生变化也导致了model改变,这并不是预期内的状况
自定义组件中这样做的:

const model = defineModel<DnsConfigField[]>();
watchEffect(()=>{
   console.log(model.value)
})

以下是我用到的 InputElRedioGroup 截图:

image

image

@github-actions github-actions bot locked and limited conversation to collaborators Dec 31, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants