El-Plus-Crud

Appearance

注册 ​

注意

该组件由于 table 和 form 逻辑耦合较高，且需要在注册组件时传入相关配置信息，所以目前仅支持 app.use() 方式进行全局注册，不支持局部注册，另外因为组件内部未打包 Element Plus 相关组件源码，所以 Element Plus 也需要全局注册！！！

介意的小伙伴请勿食用~

引入 ​

请确保 ElementPlus 全局注册
ts
// ...
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// ...
app.use(ElementPlus)
// ...
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// ...
app.use(ElementPlus)

在 src/main.ts 中：

ts
// ...
import ElPlusCrud from 'el-plus-crud'
// ...
import ElPlusCrud from 'el-plus-crud'

简单注册 ​

TIP

开发时强烈建议开启 debug 调试模式，因为很多警告信息打印是基于 debug 模式才会输出~！

ts
// ...
const config: ICRUDConfig = { debug: true }
app.use(ElPlusCrud, config)
// ...
const config: ICRUDConfig = { debug: true }
app.use(ElPlusCrud, config)

提示

如进行简单注册，则将不能在配置中使用某些 字符串形式 的特性， 如 format: 'xxx' 和 options: 'xxx'

在后续的 formatData 和 globalData 属性中会详细介绍

完整注册 ​

ts
// ...
const config: ICRUDConfig = { debug: true }
const formatData: { [key: string]: Function } = {}
const globalData: { [key: string]: Function } = {}
app.use(ElPlusCrud, config, readonly(formatData), readonly(globalData))
// ...
const config: ICRUDConfig = { debug: true }
const formatData: { [key: string]: Function } = {}
const globalData: { [key: string]: Function } = {}
app.use(ElPlusCrud, config, readonly(formatData), readonly(globalData))

formatData 和 globalData 对象支持静态，同时也支持 响应式 下面以 pinia 为例

@/stores/tempData.ts
ts
import { defineStore } from 'pinia'

/**
 * 通用数据存储
 */
export const useTempData = defineStore('tempData', {
  state: () => ({
    // 全局数据
    globalData: {} as any,
    formatData: {} as any
  }),
  actions: {
    /**
     * 更新全局数据
     */
    updateGlobalData(newData: any) {
      Object.assign(this.globalData, newData)
    }
  }
})
import { defineStore } from 'pinia'

/**
 * 通用数据存储
 */
export const useTempData = defineStore('tempData', {
  state: () => ({
    // 全局数据
    globalData: {} as any,
    formatData: {} as any
  }),
  actions: {
    /**
     * 更新全局数据
     */
    updateGlobalData(newData: any) {
      Object.assign(this.globalData, newData)
    }
  }
})
ts
// 引入store - tempData中提前定义好 formatData 和 globalData 属性 
import { useTempData } from '@/stores/tempData'

// ...
const config: ICRUDConfig = { debug: true }
// 定义响应式数据  
const formatData = useTempData().formatData
const globalData = useTempData().globalData
app.use(ElPlusCrud, config, readonly(formatData), readonly(globalData))
// 引入store - tempData中提前定义好 formatData 和 globalData 属性 
import { useTempData } from '@/stores/tempData'

// ...
const config: ICRUDConfig = { debug: true }
// 定义响应式数据  
const formatData = useTempData().formatData
const globalData = useTempData().globalData
app.use(ElPlusCrud, config, readonly(formatData), readonly(globalData))
ts
// 其他页面修改 globalData
import { useTempData } from '@/stores/tempData'

// set new globalData...
useTempData().updateGlobalData({ xxx: 'xxx' })
// 其他页面修改 globalData
import { useTempData } from '@/stores/tempData'

// set new globalData...
useTempData().updateGlobalData({ xxx: 'xxx' })

formatData 和 globalData 属性的说明，请见 formatData 和 globalData

config : ICRUDConfig 说明 ​

ICRUDConfig TS 定义
ts
/**
 * 注册curd配置
 */
export interface ICRUDConfig {
  // 是否开启debug调试模式，目前主要是一些console信息打印
  debug?: boolean
  // element plus组件的size
  size?: 'default' | 'small' | 'large'
  // 本地存储的key前缀
  storagePrefix?: string
  // 表单相关配置
  form?: {
    // 输入长度限制
    leng?: {
      // input长度限制
      input?: number
      // 文本域长度限制
      textare?: number
      // 数字输入框限制信息
      nbinput?: {
        // 最小数值
        min?: number
        // 最大数值
        max?: number
        // 小数位数
        precision?: number
        // 是左右加减，还是 右侧的上下箭头 element plus number组件的属性
        controlsPosition?: 'right' | ''
      }
    }
    // 用户选择组件设置
    linkUser?: {
      // 获取用户列表的查询接口
      getUserList: IFetch<any>
      // 部门列表key
      deptListKey: string
    }
    // 用户自定义form组件的名称,使用这个，全局注册的名字为el-plus-form-xxx，form中就可以使用xxx进行引入
    comList?: string[]
  }
  // 上传组件配置
  upload?: {
    // 类型 minio 或者 七牛 / 阿里云 或者不填，不填则完全依赖 action
    type?: 'minio' | 'quniu' | 'aliyun'
    // 上传路径，也可以单独配置到子组件desc中
    action?: string | ((data?: any) => string | Promise<any>)
    // 如果action返回的值是对象的话，则按照以下map进行解析
    actionMap?: {
      // 获取文件上传地址的对象key，如果不在根级，则需使用数组的形式。如：data.xxx.action 就需要写为 ['data', 'xxx', 'action']
      actionKey: string | Array<string>
      // 获取文件对象的名称key，如果不在根级，则需使用数组的形式。如：data.xxx.name 就需要写为 ['data', 'xxx', 'name']
      nameKey: string | Array<string>
      // 获取文件上传id对象key，如果不在根级，则需使用数组的形式。如：data.xxx.uploadId 就需要写为 ['data', 'xxx', 'uploadId']
      uploadIdKey: string | Array<string>
    }
    // 上传图片最大限制
    maxISize?: number
    // 上传文件最大限制
    maxFSize?: number
    // 真正的上传方法
    uploadFn?: (data?: Object) => Promise<any>
    // 获取上传的token信息
    token?: string | Object | ((data?: Object) => Promise<Object>)
    // 获取文件上传的token对象key，如果不在根级，则需使用数组的形式。如：data.xxx.token 就需要写为 ['data', 'xxx', 'token']
    tokenKey?: string | Array<string>
    // 获取文件访问签名-私有云或私有minio时必填
    sign?: (uploadId: string) => Promise<any>
    // 解析签名数据Map
    signMap?: {
      // 获取文件对象的地址key，如果不在根级，则需使用数组的形式。如：data.xxx.objectUrl 就需要写为 ['data', 'xxx', 'objectUrl']
      objectUrlKey: string | Array<string>
      // 获取文件上传地址的对象key，如果不在根级，则需使用数组的形式。如：data.xxx.previewUrl 就需要写为 ['data', 'xxx', 'previewUrl']
      previewUrlKey: string | Array<string>
    }
    // 分片配置
    sharding?: {
      // TODO
    }
  }
  // token 或者是 获取token 的方法
  token?: string | ((data?: any) => string)
  // 校验按钮权限方法
  auth?: (data?: any) => boolean
}
/**
 * 注册curd配置
 */
export interface ICRUDConfig {
  // 是否开启debug调试模式，目前主要是一些console信息打印
  debug?: boolean
  // element plus组件的size
  size?: 'default' | 'small' | 'large'
  // 本地存储的key前缀
  storagePrefix?: string
  // 表单相关配置
  form?: {
    // 输入长度限制
    leng?: {
      // input长度限制
      input?: number
      // 文本域长度限制
      textare?: number
      // 数字输入框限制信息
      nbinput?: {
        // 最小数值
        min?: number
        // 最大数值
        max?: number
        // 小数位数
        precision?: number
        // 是左右加减，还是 右侧的上下箭头 element plus number组件的属性
        controlsPosition?: 'right' | ''
      }
    }
    // 用户选择组件设置
    linkUser?: {
      // 获取用户列表的查询接口
      getUserList: IFetch<any>
      // 部门列表key
      deptListKey: string
    }
    // 用户自定义form组件的名称,使用这个，全局注册的名字为el-plus-form-xxx，form中就可以使用xxx进行引入
    comList?: string[]
  }
  // 上传组件配置
  upload?: {
    // 类型 minio 或者 七牛 / 阿里云 或者不填，不填则完全依赖 action
    type?: 'minio' | 'quniu' | 'aliyun'
    // 上传路径，也可以单独配置到子组件desc中
    action?: string | ((data?: any) => string | Promise<any>)
    // 如果action返回的值是对象的话，则按照以下map进行解析
    actionMap?: {
      // 获取文件上传地址的对象key，如果不在根级，则需使用数组的形式。如：data.xxx.action 就需要写为 ['data', 'xxx', 'action']
      actionKey: string | Array<string>
      // 获取文件对象的名称key，如果不在根级，则需使用数组的形式。如：data.xxx.name 就需要写为 ['data', 'xxx', 'name']
      nameKey: string | Array<string>
      // 获取文件上传id对象key，如果不在根级，则需使用数组的形式。如：data.xxx.uploadId 就需要写为 ['data', 'xxx', 'uploadId']
      uploadIdKey: string | Array<string>
    }
    // 上传图片最大限制
    maxISize?: number
    // 上传文件最大限制
    maxFSize?: number
    // 真正的上传方法
    uploadFn?: (data?: Object) => Promise<any>
    // 获取上传的token信息
    token?: string | Object | ((data?: Object) => Promise<Object>)
    // 获取文件上传的token对象key，如果不在根级，则需使用数组的形式。如：data.xxx.token 就需要写为 ['data', 'xxx', 'token']
    tokenKey?: string | Array<string>
    // 获取文件访问签名-私有云或私有minio时必填
    sign?: (uploadId: string) => Promise<any>
    // 解析签名数据Map
    signMap?: {
      // 获取文件对象的地址key，如果不在根级，则需使用数组的形式。如：data.xxx.objectUrl 就需要写为 ['data', 'xxx', 'objectUrl']
      objectUrlKey: string | Array<string>
      // 获取文件上传地址的对象key，如果不在根级，则需使用数组的形式。如：data.xxx.previewUrl 就需要写为 ['data', 'xxx', 'previewUrl']
      previewUrlKey: string | Array<string>
    }
    // 分片配置
    sharding?: {
      // TODO
    }
  }
  // token 或者是 获取token 的方法
  token?: string | ((data?: any) => string)
  // 校验按钮权限方法
  auth?: (data?: any) => boolean
}
ICRUDConfig 默认值
ts
export default {
  // 是否开始debug调试模式,目前主要时一些console信息打印
  debug: false,
  // element plus组件的size
  size: 'default',
  // 本地存储的key前缀
  storagePrefix: 'el-plus-crud_',
  // 表单相关配置
  form: {
    // 输入长度限制
    leng: {
      // input长度限制
      input: 20,
      // 文本域长度限制
      textare: 500,
      // 数字输入框限制信息
      nbinput: {
        // 最小数值
        min: 0,
        // 最大数值
        max: 999999999,
        // 小数位数
        precision: 0,
        // 是左右加减，还是 右侧的上下箭头 element plus number组件的属性
        controlsPosition: 'right'
      }
    },
    // 用户自定义form组件的名称,使用这个，全局注册的名字为el-plus-form-xxx，form中就可以使用xxx进行引入
    comList: [] as string[]
  },
  // 上传组件配置
  upload: {
    // 类型 minio 或者 七牛 / 阿里云 或者不填，不填则完全依赖 action
    type: undefined,
    // 上传路径
     action: ({ type }: { type: 'minio' | 'quniu' | 'aliyun' | undefined }) => {
      switch (type) {
        case 'aliyun':
          return ''
        case 'quniu':
          return ''
      }
      return undefined
    },
    // 如果action返回的值是对象的话，则按照以下map进行解析
    actionMap: {
      // 获取文件上传地址的对象key，如果不在根级，则需使用数组的形式。如：data.xxx.action 就需要写为 ['data', 'xxx', 'action']
      actionKey: 'uploadUrl'
      // 获取文件对象的名称key，如果不在根级，则需使用数组的形式。如：data.xxx.name 就需要写为 ['data', 'xxx', 'name']
      nameKey: 'objectName'
      // 获取文件上传id对象key，如果不在根级，则需使用数组的形式。如：data.xxx.uploadId 就需要写为 ['data', 'xxx', 'uploadId']
      uploadIdKey: 'uploadId'
    },
    // 上传图片最大限制
    maxISize: 1024 * 1024 * 20,
    // 上传文件最大限制
    maxFSize: 1024 * 1024 * 20
    // 解析token的map对象
    tokenKey: 'token',
    // 解析签名数据Map
    signMap: {
      objectUrlKey: 'objectUrl',
      previewUrlKey: 'previewUrl'
    }
  }
} as ICRUDConfig
export default {
  // 是否开始debug调试模式,目前主要时一些console信息打印
  debug: false,
  // element plus组件的size
  size: 'default',
  // 本地存储的key前缀
  storagePrefix: 'el-plus-crud_',
  // 表单相关配置
  form: {
    // 输入长度限制
    leng: {
      // input长度限制
      input: 20,
      // 文本域长度限制
      textare: 500,
      // 数字输入框限制信息
      nbinput: {
        // 最小数值
        min: 0,
        // 最大数值
        max: 999999999,
        // 小数位数
        precision: 0,
        // 是左右加减，还是 右侧的上下箭头 element plus number组件的属性
        controlsPosition: 'right'
      }
    },
    // 用户自定义form组件的名称,使用这个，全局注册的名字为el-plus-form-xxx，form中就可以使用xxx进行引入
    comList: [] as string[]
  },
  // 上传组件配置
  upload: {
    // 类型 minio 或者 七牛 / 阿里云 或者不填，不填则完全依赖 action
    type: undefined,
    // 上传路径
     action: ({ type }: { type: 'minio' | 'quniu' | 'aliyun' | undefined }) => {
      switch (type) {
        case 'aliyun':
          return ''
        case 'quniu':
          return ''
      }
      return undefined
    },
    // 如果action返回的值是对象的话，则按照以下map进行解析
    actionMap: {
      // 获取文件上传地址的对象key，如果不在根级，则需使用数组的形式。如：data.xxx.action 就需要写为 ['data', 'xxx', 'action']
      actionKey: 'uploadUrl'
      // 获取文件对象的名称key，如果不在根级，则需使用数组的形式。如：data.xxx.name 就需要写为 ['data', 'xxx', 'name']
      nameKey: 'objectName'
      // 获取文件上传id对象key，如果不在根级，则需使用数组的形式。如：data.xxx.uploadId 就需要写为 ['data', 'xxx', 'uploadId']
      uploadIdKey: 'uploadId'
    },
    // 上传图片最大限制
    maxISize: 1024 * 1024 * 20,
    // 上传文件最大限制
    maxFSize: 1024 * 1024 * 20
    // 解析token的map对象
    tokenKey: 'token',
    // 解析签名数据Map
    signMap: {
      objectUrlKey: 'objectUrl',
      previewUrlKey: 'previewUrl'
    }
  }
} as ICRUDConfig

配置优先级 ​

config 中设置的某些属性是组件全局兜底用的，你可以在使用相关组件的时候单独设置（以 input 的长度限制为例）

input 的默认长度为 20 (config.form.leng.input = 20)

vue
<ElPlusFormInput :desc="{ placeholder: '只能输入20个字!' }" />
<ElPlusFormInput :desc="{ placeholder: '只能输入20个字!' }" />

修改 input 长度限制为 10

vue
<ElPlusFormInput :desc="{ maxlength: 10, placeholder: '现在只能输入10个字!' }" />
<ElPlusFormInput :desc="{ maxlength: 10, placeholder: '现在只能输入10个字!' }" />