1.问题
2.解决方法
2.1label-width
说明：el-form中label-width设置为auto
2.2 label-wdith固定值
说明：如果在el-form-item里面设置了label-width="100px"；采用宫格布局。
.demo-one{display: grid;grid-template-columns: repeat(3,1fr);
}3源码
<template><div style="width: 900px;margin-left: 200px"><el-formref="ruleFormRef":model="ruleForm":rules="rules"class="demo-ruleForm":size="formSize"status-icon><div class="demo-one"><el-form-item label="行政区名称" prop="name" label-width="100px"><el-input v-model="ruleForm.name" /></el-form-item><el-form-item label="类型" prop="region" label-width="100px"><el-select v-model="ruleForm.region" placeholder="Activity zone" ><el-option label="Zone one" value="shanghai" /><el-option label="Zone two" value="beijing" /></el-select></el-form-item><el-form-item label="行政区名称" prop="name" label-width="100px"><el-input v-model="ruleForm.name" /></el-form-item></div><div class="demo-one"><el-form-item label="行政区名称" prop="name" label-width="100px"><el-input v-model="ruleForm.name" /></el-form-item><el-form-item label="行政区名称" prop="name" label-width="100px"><el-input v-model="ruleForm.name" /></el-form-item><el-form-item label="类型" prop="region" label-width="100px"><el-select v-model="ruleForm.region" placeholder="Activity zone" ><el-option label="Zone one" value="shanghai" /><el-option label="Zone two" value="beijing" /></el-select></el-form-item></div></el-form></div>
</template><script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'interface RuleForm {name: stringregion: stringcount: stringdate1: stringdate2: stringdelivery: booleanlocation: stringtype: string[]resource: stringdesc: string
}const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({name: 'Hello',region: '',count: '',date1: '',date2: '',delivery: false,location: '',type: [],resource: '',desc: '',
})const locationOptions = ['Home', 'Company', 'School']const rules = reactive<FormRules<RuleForm>>({name: [{ required: true, message: 'Please input Activity name', trigger: 'blur' },{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },],region: [{required: true,message: 'Please select Activity zone',trigger: 'change',},],count: [{required: true,message: 'Please select Activity count',trigger: 'change',},],date1: [{type: 'date',required: true,message: 'Please pick a date',trigger: 'change',},],date2: [{type: 'date',required: true,message: 'Please pick a time',trigger: 'change',},],location: [{required: true,message: 'Please select a location',trigger: 'change',},],type: [{type: 'array',required: true,message: 'Please select at least one activity type',trigger: 'change',},],resource: [{required: true,message: 'Please select activity resource',trigger: 'change',},],desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' },],
})const submitForm = async (formEl: FormInstance | undefined) => {if (!formEl) returnawait formEl.validate((valid, fields) => {if (valid) {console.log('submit!')} else {console.log('error submit!', fields)}})
}const resetForm = (formEl: FormInstance | undefined) => {if (!formEl) returnformEl.resetFields()
}const options = Array.from({ length: 10000 }).map((_, idx) => ({value: `${idx + 1}`,label: `${idx + 1}`,
}))
</script><style scoped>
.demo-one{display: grid;grid-template-columns: repeat(3,1fr);
}
</style>4.击穿样式
说明：下拉框与输入框的样式击穿
.el-select,.el-input_inner {width: 100%;
}