字段类型列表

此处列出目前支持的全部字段类型

文本输入框

不配置type，默认即是文本输入框

Element包装组件

以下字段类型的组件包装过ElementUI的某个组件 被包装的element组件的参数一般通过component.props.elProps来配置

选择框

• 字段类型 select | radio | checkbox

export default {
  select: {
    search: { disabled: true, component: { props: { clearable: true } } },
    form: { component: { name: 'dict-select', props: { elProps: { disabled: false, readonly: false } } } },
    component: { name: 'values-format', props: {} }
  },
  radio: {
    search: { disabled: true, component: { name: 'dict-select', props: { clearable: true } } },
    form: { component: { name: 'dict-radio', props: { elProps: { disabled: false, readonly: false } } } },
    component: { name: 'values-format', props: {} }
  },
  checkbox: {
    search: { disabled: true, component: { name: 'dict-select', props: { clearable: true, multiple: true } } },
    form: { component: { name: 'dict-checkbox', props: { elProps: { disabled: false, readonly: false } } } },
    component: { name: 'values-format', props: {} }
  },
  'dict-switch': {
    search: { disabled: true, component: { name: 'dict-switch', props: { clearable: true, multiple: true } } },
    form: { component: { name: 'dict-switch', props: { elProps: { disabled: false, readonly: false } } } },
    component: { name: 'values-format', props: { elProps: { disabled: false, readonly: true } } }
  }
}

• 相关组件参数：
  • dict-select
  • dict-radio
  • dict-checkbox
  • values-format
• 示例：
  • http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/select (opens new window)
• 配置示例说明：
  • 表单组件dict-select 内部封装了el-select：el-select (opens new window)
  • el-select的参数需要配置在component.props.elProps下

let column={
   type: 'select',
   form: {
     component: { 
       name:'dict-select',
       props: {
         separator: ',' ,//多选时，value的分隔符
         elProps:{ // el-select的配置项，https://element.eleme.cn/#/zh-CN/component/select
           filterable: true,
           multiple: true,
           clearable: true
         }            
       }    
     }
   },
   component:{
     name:'values-format',
     props:{
       multiple:true, //默认支持多选
       separator: ',' ,//多选时，value的分隔符
     }   
   }
}

级联

• 类型
  type = cascader （单选）| cascader-multi（多选）

export default {
  cascader: {
    search: { disabled: true, component: { value: []/* 修复重置表单时返回[null]的bug */, props: { elProps: { clearable: true } } } },
    form: { component: { name: 'cascade-select', props: { elProps: { filterable: true, disabled: false } } } },
    component: { name: 'cascade-format', props: { multiple: false } }
  },
  'cascader-multi': {
    search: { disabled: true, component: { value: [], props: { elProps: { clearable: true } } } },
    form: { component: { name: 'cascade-select', props: { elProps: { filterable: true, disabled: false, props: { multiple: true }, collapseTags: true } } } },
    component: { name: 'cascade-format', props: { multiple: true } }
  }
}

• 相关组件：
  • cascader-select
  • cascader-format
• 示例：
  • http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/select (opens new window)

扩展组件

国际电话

• 类型 type=phoneNumber

export default {
  phoneNumber: {
    form: {
      component: {
        name: 'el-phone-number-input',
        props: {
          size: 'sm'
        }
      }
    },
    formatter (row, column, value, index) {
      let ret = ''
      if (value != null) {
        if (value.callingCode != null) {
          ret += '(+' + value.callingCode + ')'
        } else if (value.countryCode != null) {
          ret += '(' + value.countryCode + ')'
        }
        if (value.phoneNumber != null) {
          ret += value.phoneNumber
        }
      }
      return ret
    }
  }
}

• 相关组件：
  • el-phone-number-input (opens new window)
• 示例：
  • http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/phone (opens new window)

省市区选择

• 类型名称
  type = area-selector （级联选择） | area-multi-selector （级联多选） | area-tree-selector （树形选择）

import pcaData from './area-data'
const cacheKey = '__default_area_tree_dict_data__'
function getData () {
  return pcaData
}
export default {
  'area-selector': {
    search: { disabled: true, component: { value: []/* 修复重置表单时返回[null]的bug */, props: { elProps: { clearable: true } } } },
    form: { component: { name: 'cascade-select', props: { elProps: { filterable: true } } } },
    component: { name: 'cascade-format', props: { } },
    dict: { url: cacheKey, getData: getData, label: 'name', value: 'code', isTree: true }
  },
  'area-multi-selector': {
    search: { disabled: true, component: { value: []/* 修复重置表单时返回[null]的bug */, props: { elProps: { clearable: true } } } },
    form: { component: { name: 'cascade-select', props: { elProps: { filterable: true, props: { multiple: true }, 'collapse-tags': true } } } },
    component: { name: 'cascade-format', props: { multiple: true } },
    dict: { url: cacheKey, getData: getData, label: 'name', value: 'code', isTree: true }
  },
  'area-tree-selector': {
    form: { component: { name: 'd2p-tree-selector', props: { } } },
    component: { name: 'values-format', props: {} },
    dict: { url: cacheKey, getData: getData, label: 'name', value: 'code', isTree: true }
  }
}

• 相关组件：
  • cascade-select
  • cascade-format
• 示例地址：
  • http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/area (opens new window)

树形选择

• 类型名称
  type = tree-selector

export default {
  'tree-selector': {
    form: { component: { name: 'd2p-tree-selector', props: { } } },
    component: { name: 'values-format', props: {} }
  }
}

• 相关组件：

  • d2p-tree-selector安装
  • d2p-tree-selector参数

• 示例：

  • http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/area (opens new window)

文件上传，裁剪上传

• 类型
  • file-uploader（文件上传） | image-uploader（图片上传） | avatar-uploader（头像上传，单图片）
  • avatar-cropper (头像裁剪上传)

export default {
  'image-uploader': {
    form: { component: { name: 'd2p-file-uploader', props: { elProps: { listType: 'picture-card', accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif' } } } },
    component: { name: 'd2p-images-format' },
    view: {
      component: { props: { height: 100, width: 100 } }
    },
    align: 'center'
  },
  'avatar-uploader': {
    form: { component: { name: 'd2p-file-uploader', props: { elProps: { limit: 1, listType: 'avatar', accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif', showFileList: false } } } },
    component: { name: 'd2p-images-format' },
    view: {
      component: { props: { height: 100, width: 100 } }
    },
    align: 'center',
    valueResolve (row, col) {
      const value = row[col.key]
      if (value != null && value instanceof Array) {
        if (value.length >= 0) {
          row[col.key] = value[0].url
        } else {
          row[col.key] = null
        }
      }
    }
  },
  'file-uploader': {
    form: { component: { name: 'd2p-file-uploader', props: { elProps: { listType: 'text' } } } },
    component: { name: 'd2p-files-format' }
  },
  'avatar-cropper': {
    form: { component: { name: 'd2p-cropper-uploader', props: { accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif', cropper: { viewMode: 1 } } } },
    component: { name: 'd2p-images-format' },
    align: 'center',
    view: {
      component: { props: { height: 100, width: 100 } }
    }
  }
}

• 示例：

  • http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/uploader (opens new window)
  • http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/cropper (opens new window)

• 相关组件文档：

  • D2pUploader安装
  • D2pFileUploader安装
  • D2pCropperUploader安装
  • d2p-file-uploader
  • d2p-cropper-uploader
  • d2p-cropper
  • d2p-images-format
  • d2p-files-format

图标选择器

• 类型名称
  type = icon-selector

export default {
  'icon-selector': {
    form: { component: { name: 'd2p-icon-select' } },
    component: { name: 'd2p-icon' },
    align: 'center'
  }
}

• 相关组件：

  • D2pIconSelector安装
  • d2p-icon-select
  • d2p-icon

• 示例：

  • http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/icon (opens new window)

富文本框

• 类型
  • type= editor-quill

export default {
  'editor-quill': {
    form: { component: { name: 'd2p-quill', span: 24 } }
  },
  'editor-ueditor': {
    form: { component: { name: 'd2p-ueditor', span: 24 } }
  },
  'editor-wang': {
    form: { component: { name: 'd2p-wang-editor', span: 24 } }
  }

}

• 相关组件：

  • d2p-quill

• 示例：

  • http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/editor (opens new window)

ElementUI组件

以下字段类型对应的组件为ElementUI的相应组件
直接在component.props中配置ElementUI组件的属性即可实现定制化

日期时间选择

• type = datetime | date | time | daterange | datetimerange

import { daterangeFormatter, datetimerangeFormatter, shortcuts } from '../functions'

export default {
  datetime: {
    form: { component: { name: 'el-date-picker', props: { type: 'datetime' } } },
    component: { name: 'date-format' }
  },
  date: {
    form: { component: { name: 'el-date-picker' } },
    component: { name: 'date-format', props: { format: 'YYYY-MM-DD' } }
  },
  daterange: {
    form: {
      component: {
        name: 'el-date-picker',
        props: {
          type: 'daterange',
          'range-separator': '至',
          'start-placeholder': '开始',
          'end-placeholder': '结束',
          'picker-options': { shortcuts: shortcuts }
        }
      }
    },
    formatter: daterangeFormatter
  },
  datetimerange: {
    form: {
      component: {
        name: 'el-date-picker',
        props: {
          type: 'datetimerange',
          'range-separator': '至',
          'start-placeholder': '开始',
          'end-placeholder': '结束',
          'picker-options': { shortcuts: shortcuts }
        }
      }
    },
    formatter: datetimerangeFormatter
  },
  time: {
    form: { component: { name: 'el-time-picker' } },
    component: { name: 'date-format', props: { format: 'HH:mm:ss' } }
  }
}

• 相关组件：
  • el-date-picker (opens new window)
  • el-time-picker (opens new window)
  • date-format
• 示例：
  • http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/date (opens new window)

其他el组件

• 类型

export default {
  button: {
    form: { component: { name: 'd2p-button-input' } },
    disabled: true
  },
  number: {
    form: { component: { name: 'el-input-number', props: { } } },
    align: 'center'
  },
  switch: {
    form: { component: { name: 'el-switch', props: { } } },
    component: { name: 'el-switch', props: { } },
    align: 'center'
  },
  slider: {
    form: { component: { name: 'el-slider', props: { } } },
    align: 'center'
  },
  rate: {
    form: { component: { name: 'el-rate', props: { } } },
    align: 'center'
  },
  'color-picker': {
    form: { component: { name: 'el-color-picker', props: { } } },
    align: 'center'
  },
  transfer: {
    form: { component: { name: 'el-transfer', props: { } } },
    align: 'center'
  },
  autocomplete: {
    form: { component: { name: 'el-autocomplete', props: { } } }
  }
}

数字输入

• type = number
• 表单组件：
  • el-input-number (opens new window)
• 示例：
  • http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/el (opens new window)

开关

• type = switch
• 相关组件：
  • el-switch (opens new window)
• 示例：
  • http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/el (opens new window)

滑动条

• type = slider
• 相关组件：
  • el-slider (opens new window)
• 示例：
  • http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/el (opens new window)

评分

• type = rate
• 相关组件：
  • el-rate (opens new window)
• 示例：
  • http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/el (opens new window)

颜色

• type = color-picker
• 相关组件：
  • el-color-picker (opens new window)
• 示例：
  • http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/el (opens new window)

穿梭框

• type = transfer
• 相关组件:
  • el-transfer (opens new window)
• 示例：
  • http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html#/demo/form/el (opens new window)

slot自定义快捷字段类型

• type = slot （表单以及行展示组件需要通过slot自定义）
• type = slot-all （表单、行展示组件、查询组件均需要通过slot自定义）
• type = slot-form （仅表单组件需要通过slot自定义）
• 更多详情请看 slot自定义表单功能
• 对应默认配置

export default {
  'slot-all': {
    search: { slot: true },
    form: { slot: true },
    rowSlot: true
  },
  slot: {
    form: { slot: true },
    rowSlot: true
  },
  'slot-form': {
    form: { slot: true }
  }
}