说明

type 的值类型有两种:type: String | Component 


内置类型


类型含义属性参考
text静态文本
input当行文本输入框element-ui input

autocomplete

带输入建议的输入框

element-ui input

textarea

多行文本输入框

element-ui input
number数字element-ui number
checkbox复选element-ui checkbox
checkbox-button复选按钮样式element-ui checkbox
radio单选element-ui radio

radio-button

单选按钮样式

element-ui radio

date日期element-ui date-picker

dates

单个或多个日期

element-ui date-picker

week

element-ui date-picker

month

element-ui date-picker

monthrange

月范围

element-ui date-picker

year

element-ui date-picker

daterange

日期范围

element-ui date-picker

time时间element-ui time-picker

timerange

时间范围

element-ui time-picker
datetime日期和时间element-ui datetime-picker

datetimerange

日期和时间范围

element-ui datetime-picker

switch开关element-ui switch

yesno

是否

element-ui checkbox

slider滑块element-ui slider
password密码element-ui input
color颜色选择器element-ui color-picker
select选择器element-ui select
cascader级联选择器element-ui cascader
transfer穿梭框element-ui transfer
rate评分组件element-ui rate
tag标签element-ui tag

image

图片展示

element-ui image

button按钮element-ui button


扩展组件说明

组件的具体属性请参考相关链接,这里主要讲解一下element-ui没有的组件

text类型

text 为静态文本,其特点是,还可以传递 options 参数,对值进行格式化显示,例如:

formData: {
   sex: 1
},
formDesc: {
  sex: {
    type: 'text',
    label: '性别',
    options: [
      { text: '男', value: 1 },
      { text: '女', value: 2 }
    ]
  }
}


此时显示到界面上为:

image.png

button类型

button 类型为按钮类型,你可以在按钮上自定义事件,按钮的文字可以通过 title 属性定义,例如:


formDesc: {
  btn: {
    label: '自定义',
    type: 'button',
    title: '按钮文字', // 按钮文字内容
    // 或者 title: '按钮文字'
    on: {
      // 按钮事件触发
      click () {
        console.log('clicked')
      }
    },
    // 属性设置
    attrs: {
      type: 'primary'
    }
  }
}

image.png

yesno类型

yesno 为是否类型,功能类似switch开关,更语义化些,使用单个checkbox完成,值为true / false 或者 0 / 1


formDesc: {
  isCheck: {
    label: '校检',
    type: 'yesno',
    title: '是否必填' // 文字部分
  }
}


image.png

tag类型

tag 为标签类型,由 element-ui select 创建条目功能形成,所以可以提供options参数,具体请看:

vue-ele-form-tag.gif


image类型

image 为图片展示类型,由 element-ui image 组件形成,默认大小为 150px ,默认开启 图片预览功能 ,如果需要关闭,可设置 isShowPreview 为 false , 默认 fit 值为 cover ,值可以为字符串或者数组类型:


formDesc: {
  pictures: {
    label: '个人图片',
    type: 'image',
    title: '是否必填',
    // 值类型为字符串 / 数组
    default: [
        'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg']
    ],
    style: {
      // 可以在此调整大小
        width: '200px',
      height: '200px'
    },
    attrs: {
        isShowPreview: true // 默认值开启图片预览功能,可以设置为false,关闭
    }
  }
}


3.gif


扩展类型


动态type类型

当type可能为多种类型时,就需要动态类型出场了,具体看示例:


{
  formDesc: {
    valueType: {
      type: 'radio',
      label: '值的类型',
      default: 'switch',
      options: [
        { text: 'boolean', value: 'switch' },
        { text: 'number', value: 'number' },
        { text: 'string', value: 'input' }
      ]
    },
    value: {
      type: data => data.valueType,
      label: '值'
    }
  }
}

image.png