El-Plus-Crud

Appearance

GlobalData 配置项 ​

应用场景 ​

跟 formatData 相似，在开发过程中，遇到渲染含有多选项的 Element 组件（如 cascader / checkbox / select / radio 等）时，通常会将选项封装为数组，以支付方式为例：

@/data/index.ts

ts
/**
 * 支付方式
 */
export const payTypeList = [
  { label: '微信', value: 1 },
  { label: '支付宝', value: 2 },
  { label: '银联', value: 3 }
]
/**
 * 支付方式
 */
export const payTypeList = [
  { label: '微信', value: 1 },
  { label: '支付宝', value: 2 },
  { label: '银联', value: 3 }
]

注册时传入 globalData

ts
// 引用上文定义的函数
import * as globalData from '@/data'

app.use(ElPlusCrud, {}, {}, readonly(globalData))
// 引用上文定义的函数
import * as globalData from '@/data'

app.use(ElPlusCrud, {}, {}, readonly(globalData))

vue 文件中使用

vue
<ElPlusFormSelect :desc="{ options: 'payTypeList' }" />
<ElPlusFormSelect :desc="{ options: 'payTypeList' }" />

是不是 so easy ?