elemnt-plus组件 使用手册 form

表单 form

封装form

1.定义原始数据json

options: [
//日期选择器
		{
			type: 'date-picker',
			prop: 'picker',
			label: '时间：',
			// 年-月 格式  valueFormat 将日期的字符串YYYY-MM格式获取
			attrs:{ valueFormat:"YYYY-MM",type:'month'},
			// 年-月-日 格式  
	        attrs:{ valueFormat:"YYYY-MM-DD"},
	        //控制时间在今天之前
	        attrs:{ 
	        	disabledDate: time => {
				return time.getTime() > Date.now()
			}
		},	
//多级选择		
	{
			type: 'cascader',
			children: [{
				label: '一级选项 1',
				value: '1',
				type: 'option',
				children: [
				  {
					label: '二级选项 1-1',
					value: '1-1',
					type: 'option',
					children: [
					  {
						label: '三级选项 1-1-1',
						value: '1-1-1'
					  },
					  {
						label: '三级选项 1-1-2',
						value: '1-1-2'
					  }
					]
				  },
				  {
					type: 'option',
					label: '二级选项 1-2',
					value: '1-2',
					children: [
					  {
						label: '三级选项 1-2-1',
						value: '1-2-1'
					  },
					  {
						label: '三级选项 1-2-2',
						value: '1-2-2'
					  }
					]
				  }
				]
			}]
		}
	//多个单选框
		{
			type: 'checkbox-group',
			value: [],
			prop: 'like',
			label: '爱好',
			rules: [
			{
				required: true,
				message: '爱好不能为空',
				trigger: 'change'
			}
			],
			children: [
			{
				type: 'checkbox',
				label: '足球',
				value: '1'
			},
			{
				type: 'checkbox',
				label: '篮球',
				value: '2'
			},
			{
				type: 'checkbox',
				label: '排球',
				value: '3'
			}
			]
		},
//单选框		
		{
			type: 'radio-group',
			value: '',
			prop: 'gender',
			label: '性别',
			rules: [
			  {
				required: true,
				message: '性别不能为空',
				trigger: 'change'
			  }
			],
			children: [
			  {
				type: 'radio',
				label: '男',
				value: 'male'
			  },
			  {
				type: 'radio',
				label: '女',
				value: 'female'
			  },
			  {
				type: 'radio',
				label: '保密',
				value: 'not'
			  }
			]
		  },
	//select	  
		  {
			type: 'select',
			prop: 'declareDete',
			label: 'select：',
			children: [
				{
					type: 'option',
					label: '经理',
					value: '1'
				},
				{
					type: 'option',
					label: '主管',
					value: '2'
				},
				{
					type: 'option',
					label: '员工',
					value: '3'
				}
			]
		},
		
	],

日期选择器 date-picker

年月日

年月

多级选择 cascader

多个单选框 checkbox-group

checkbox-group

单选框 radio-group

选择框 select

2.转换数据

//将传过来的option数据 深拷贝  不然会影响父级的数据  这样就可以多个调用不相互影响
let initForm = () => {
	if (props.options && props.options.length) {
		let m: any = {}
		let r: any = {}
		props.options.map((item: FormOptions) => {
			if(item.prop){
				m[item.prop!] = item.value
			    r[item.prop!] = item.rules
			}

		})
		//定义一个响应式对象model
		model.value = cloneDeep(m)
		rules.value = cloneDeep(r)
	}
}

el-input

修饰符 number

v-model.number

好处: 可以使input输入类型变成number 传给后台的类型是数字类型

缺点: 输入 1.0 会自动变成 1

方案: 使用el-input-number 替代

问题: 替代后输入变成中间输入

方案: .el-input-number .el-input__inner { text-align: left !important; }

左右加减符号 设置隐藏:controls=“false”

设置undefined 才能显示空 不然会显示0