Question 1

使用了一段时间的 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
  }
}

Question 2

大家一般在写表单的时候，是直接一项一项写（例如：代码块 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>