知识森林

Appearance

On this page

类字典构造函数 ​

历史痛点 ​

在开发中，我们经常需要将后台的某个接口数据作为select的下拉框数据，通常我们会写一个http请求。代码如下：

ts
const codeListRef = ref([])
http
    .post('***url', params)
    .then( records => {
        // 处理请求后的数据
        // ....
        codeListRef.value = records
    } )
// ....

如果有很多这种下拉框，就会有很多这种重复的代码，非常糟糕，structure很好的解决了这种痛点。

structure使用 ​

structure借助了处理数据字典的思路，首先定义一个code，此code包含了处理下拉数据的所有信息。了解更多：阅读封装代码

在项目中具体使用方法：在 'src/core/config/structure.ts' 中配置code

ts
// structure.ts中配置
export const STRUCTURE: {
    [key: string]: ApiSelectType
} = {
    'TEST_CODE': {
        'api': '请求后台的api',
        'label': 'name', // 下拉框即将要显示的属性
        'value': 'id'    // 需要保存到数据库的值
    }
}

// 页面中使用
import { struc } from '@dt-frames/core'
const codeListRef = struc('TEST_CODE')

// 如果我们需要传入动态参数
const codeListRef = struc('TEST_CODE', {
    // api动态参数
})

API ​

ApiSelectType ​

属性说明类型默认值版本
api请求接口stringnull
enLabel英文标签值显示的属性string | ((item: Recordable) => string)'dictValue'
label作为标签值显示的属性string | ((item: Recordable) => string)'dictValue'
listName返回的列表放在哪个数据中string | string[]['data']
numberToStringvalue是否需要将数字转为stringboolean
params请求参数{}null
requestKey字典请求key值stringcode
setOptions手动设置options(list:Array<any>) => Array<any>
type字典请求类型'post' | 'get''post'
value传个后台属性string'dictKey'