使用了一段时间的 Vue3 之后,发现了一个问题,就是 setup 函数的 return 会变成非常的长(如下面的展示),想请教下大家有没有更好的办法?
setup() {
// ... 省略其他部分
return {
SOURCES,
STATUS,
getDictLabel,
moment,
filterFormRef,
filterForm,
qjConceptsInFilterForm,
handleQjConceptSearchInFilterForm,
hospitalItemsInFilterForm,
handleHospitalItemsSearchInFilterForm,
tableLoadingState,
tableData,
pagination,
total,
pageSizes,
layout,
handleTableIndex,
handleCurrentChange,
handleSizeChange,
handleSearch,
handleReset,
qjConceptsInDialog,
handleQjConceptSearchInDialog,
hospitalItemsInDialog,
handleHospitalItemsSearchInDialog,
itemForm,
itemFormRef,
itemFormRules,
itemDialog,
handleItemDialogOpen,
handleItemDialogClose,
handleItemDialogSubmission,
handleItemDelete
}
}
大家一般在写表单的时候,是直接一项一项写(例如:代码块 1 )还是会抽离出一个配置文件,再遍历渲染出来呀(例如:代码块 2 )? 代码块 1 的问题就是 template 中的代码量很大,而代码块 2 的问题就是,要定义的类型非常多,比如光 select 就要定义普通 select 和 remote-select 等等类型,如果想要覆盖全面的话,得每一种类型都全部写上。 另外,我知道每一种方法都有其优势和弊端,我只是想向大家请教下,大家主流的做法,或者有更好的解决方案?
代码块 1
<el-form :model="form">
<el-form-item
label="用户名"
prop="username">
<el-input
v-model="form.username"
placeholder="用户名"/>
</el-form-item>
<el-form-item
label="手机号"
prop="phone">
<el-input
v-model="form.phone"
placeholder="手机号"/>
</el-form-item>
</el-form>
代码块 2
// form-items.ts
export default [
{
type: 'input'
label: '用户名',
prop: 'username',
placeholder: '用户名',
},
{
type: 'input',
label: '手机号',
prop: 'mobile',
placeholder: '手机号',
},
{
type: 'select',
label: '性别',
prop: 'gender',
placeholder: '性别',
options: [
{label: '女', value: 0},
{label: '男', value: 1}
]
}
]
// template
<el-form :model="form">
<el-form-item
v-for="(item, index) in formItems"
:key="index"
:label="item.label"
:prop="item.prop">
<template v-if=item.type === 'input'"">
<el-input
v-model="form.username"
placeholder="用户名"/>
</template>
<template v-if=item.type === 'select'"">
<el-select
v-model="form.username"
placeholder="用户名">
<el-option
v-for="(option, index) in item.options"
:key="index"
:label="option.label"
:value="option.value"/>
</el-select>
</template>
</el-form-item>
</el-form>
1
FightPig 2021-11-15 12:24:57 +08:00
用<script setup>语法糖
|
2
realkaiway 2021-11-15 12:29:26 +08:00 via iPhone
Vue3.2<script lang=ts setup>了解下,内部没必要在 return ,看你这数据结构该用 vuex 放的还是用
|
3
17681880207 OP @FightPig 谢谢🙏
|
4
17681880207 OP @realkaiway 谢谢🙏
|
5
imherer 2021-11-15 14:26:44 +08:00
@FightPig
@realkaiway 话说如果用 setup 的话那是用 2 个 script 标签么? 例如这样: <script setup> // setup 的内容 </script> <script> // 正常的内容 </script> |
6
moell 2021-11-15 14:45:49 +08:00
我反正都是一项一项地写,比较直观。
|
8
Vegetable 2021-11-15 14:59:31 +08:00
script setup ,这套逻辑下其实体验非常像早年的 jQuery ,在一个组件内都是全局变量。目前我对这套最大的意见是 eslint 还不吃$ref 这些关键字
|