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: element-plus 组件适配的问题 #5037

Closed
5 tasks done
starryknight1231 opened this issue Dec 5, 2024 · 4 comments · Fixed by #5072
Closed
5 tasks done

Bug: element-plus 组件适配的问题 #5037

starryknight1231 opened this issue Dec 5, 2024 · 4 comments · Fixed by #5072

Comments

@starryknight1231
Copy link

Version

Vben Admin V5

Describe the bug?

目前发现element-plus版本的适配器很多都会有些问题,如 ElRadioGroup ,ElSelect 等,目前搜索issues 能够解决,作者能不能统一处理一下,非常感谢。

相关issues:
Bugment-: eleplus form 适配存在问题
Bug: element-plus版本VbenForm Select下拉框设置Option提示“无数据”

Reproduction

// 表单
const [Form, formApi] = useVbenForm({
// 处理提交
handleSubmit: (item: Record<string, any>) => {
if (item.id === undefined) {
addSysAppDetail(item).then(() => {
ElMessage.success('新增成功');
modalApi.close();
emit('refresh');
});
} else {
updateSysAppDetail(item).then(() => {
ElMessage.success('修改成功');
modalApi.close();
emit('refresh');
});
}
},
schema: [
{
component: 'Input',
fieldName: 'appName',
label: '应用名称',
rules: 'required',
},
{
component: 'Input',
fieldName: 'appCode',
label: '应用编码',
rules: 'required',
},
{
component: 'Input',
fieldName: 'appUrl',
label: '应用地址',
rules: 'required',
},
{
component: 'RadioGroup',
componentProps: {
options: [
{
label: '选项1',
value: '1',
},
{
label: '选项2',
value: '2',
},
],

},
fieldName: 'isVite',
label: 'vite项目',
rules: 'required',
},
],
showDefaultActions: false,
});

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i5-10500 CPU @ 3.10GHz
    Memory: 2.44 GB / 23.83 GB
  Binaries:
    Node: 20.17.0 - D:\devsoft\nodejs\node.EXE
    npm: 10.8.2 - D:\devsoft\nodejs\npm.CMD
    pnpm: 9.13.2 - D:\devsoft\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (130.0.2849.80)
    Internet Explorer: 11.0.19041.4355

Relevant log output

No response

Validations

@mynetfan
Copy link
Collaborator

mynetfan commented Dec 5, 2024

ElementPlus 官方的这两个组件根本就没有options属性,你是在哪儿看到可以直接传递options的呢?🙂

@starryknight1231
Copy link
Author

ElementPlus 官方的这两个组件根本就没有options属性,你是在哪儿看到可以直接传递options的呢?🙂

的确不能直接传递,解决途径就是在适配器中写适配可以实现,但找到的issues实现目前有 select,radio,所以就想着作者能不能统一适配一下,基本使用 ElementPlus 可能都会有碰到这问题。

const customSelectRender = (component: T) => {
return (props: any, { attrs }: Omit<SetupContext, 'expose'>) => {
const placeholder = props?.placeholder || $t(placeholder.select);
const options = props.options;
return h(component, { ...props, ...attrs, placeholder }, () => {
// ElOption,
return options?.map((option: any) => h(ElOption, { ...option }));
});
};
};

const customRadioRender = (component: T) => {
return (props: any, { attrs }: Omit<SetupContext, 'expose'>) => {
return h(component, { ...props, ...attrs }, () => {
return props.options?.map((item) => {
return h(
props.optionType === 'button' ? ElRadioGroup : ElRadio,
{ value: item.value },
() => item.label,
);
});
});
};
};

@mynetfan
Copy link
Collaborator

mynetfan commented Dec 5, 2024

selectV2可以直接传递options。

至于其它的RadioGroup和CheckGroup等类似组件,因为主框架基本没有对某个特定框架的组件进行重新包装,所以暂时可能不会处理。目前最新的版本提供了一个ApiSelect组件可以自动处理options,是对SelectV2的重新包装以支持直接从远程接口获取数据。

主框架如果将Select包装后可以直接传递options属性,可能会在使用上造成困惑,因为这与官方文档中列出的属性相悖。

以上纯属个人看法,非项目组的结论。

@starryknight1231
Copy link
Author

selectV2可以直接传递options。

至于其它的RadioGroup和CheckGroup等类似组件,因为主框架基本没有对某个特定框架的组件进行重新包装,所以暂时可能不会处理。目前最新的版本提供了一个ApiSelect组件可以自动处理options,是对SelectV2的重新包装以支持直接从远程接口获取数据。

主框架如果将Select包装后可以直接传递options属性,可能会在使用上造成困惑,因为这与官方文档中列出的属性相悖。

以上纯属个人看法,非项目组的结论。

ok,其实最主要原因做页面的时候是看vben的文档,文档用的是 ant design vue,然后直接拿来用了,如果用的每个radio组件都需要在页面写渲染函数,略微会繁琐且没有文档可参考,作为一个非专业前端就比较难受了,当然,提这个issue只是一个意见,肯定以项目组决策为主,感恩 vben。

@github-actions github-actions bot locked and limited conversation to collaborators Dec 23, 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