<el-form>的<el-form-item>使用自定义label的写法

本文介绍了如何在Element UI框架中自定义表单组件的标签,并为标签添加样式。通过使用插槽功能,可以实现对工作说明字段的必填星号*独立控制,展示了在实际项目中灵活运用前端框架的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如果不需要自定义,直接下面这样写就可以。

<el-form ref="ruleForm" label-width="100" class="formStyle">
	<el-form-item label="工作说明">
		<el-input type="textarea" v-model="editOrder.workDesc" class="textareaRate" resize="none" size="mini"></el-input>
	</el-form-item>
</el-form>

但是在实际项目中,难免会用到自定义label,并且给label中的文字加样式,这个时候就需要使用插槽的方式。

<el-form ref="ruleForm" label-width="100" class="formStyle">
	<el-form-item>
		<span slot="label"><span style="color: #f56c6c;font-size: 14px;"> * </span>工作说明</span>
		<el-select v-model="editOrder.orderStatus" size="mini">
			<el-option :label="item.label" :value="item.value" v-for="item,index of orderStatusArr" :key="index"></el-option>
		</el-select>
	</el-form-item>
</el-form>

当前,这个必填的*在elementUI的表单验证中也可以写,但是在我的项目里有其他用途,不用纠结这个。

``` <div style="width: 100%"> <el-form style="background: #fff;width: 100%" :model="receiptAddr" ref="queryParams" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="寄件人" style="margin-left: 50px;margin-top: 20px;width: 100% "> <el-select v-model="sendAddr.sender_address" @change="sendaddrChange" placeholder="请选择寄件人" style="flex:1;width: 100%"> <el-option :label="'请选择寄件人'" :value="0"></el-option> <el-option v-for="(item, index) in getShopAddr.addr" :key="index" :label="item" :value="index"></el-option> </el-select> </el-form-item> <div></div> <el-form-item label="姓名" prop="name" size="mini" style="margin-left: 50px;margin-top: 20px;width: 100%"> <el-input v-model="sendAddr.sender_name" placeholder="姓名" clearable style="flex:1" disabled /> </el-form-item> <br> <el-form-item label="联系方式" prop="name" size="mini" style="margin-left: 50px;margin-top: 20px"> <el-input v-model="sendAddr.sender_mobile" placeholder="联系方式" clearable style="flex:1" disabled /> </el-form-item> <br> <el-form-item label="省市区" prop="name" size="mini" style="margin-left: 50px;margin-top: 20px"> <el-input v-model="sendAddr.sender_pca" placeholder="省市区" clearable style="flex:1" disabled /> </el-form-item> <br> <el-form-item label="详细地址" prop="name" size="mini" style="margin-left: 50px;margin-top: 20px"> <el-input v-model="sendAddr.sender_address" placeholder="详细地址" clearable style="flex:1" disabled /> </el-form-item> <div></div> </el-form> </div>```给宽度100%没有作用
03-15
``` <div v-for="(question, index) in questions" :key="index"> <!-- 单选框 --> <el-form-item v-if="question.question_type === 1" :label="question.question_text" :prop="`${question.question_code}`" :rules="[ { required: true, message: '请选择', trigger: 'change'} ]"> <el-radio-group v-model="formData[question.question_code]" :disabled='isUpdate'> <el-radio v-for="option in question.options" :key="option.option_code" :value="option.option_code">{{ option.option_text }}</el-radio> </el-radio-group> </el-form-item> <!-- 复选框 --> <el-form-item v-else-if="question.question_type === 2" :label="question.question_text" :prop="`${question.question_code}`" :rules="[ { type: 'array', required: true, message: '请至少选择一项', trigger: 'change'} ]"> <el-checkbox-group v-model="formData[question.question_code]" :disabled='isUpdate'> <el-checkbox v-for="option in question.options" :key="option.option_code" :value="option.option_code">{{ option.option_text }}</el-checkbox> </el-checkbox-group> </el-form-item> </div> <el-form ref="formRefs" :model="info" :rules="rules" label-width="80px" @submit.prevent=""> <el-row :gutter="16"> <el-col :span="6"> <el-form-item label="姓名" prop="name"> <el-input clearable v-model="info.name" :disabled='isUpdate' /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="性别" prop="gender"> <el-input clearable v-model="info.gender" :disabled='isUpdate' /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="年龄" prop="age"> <el-input clearable v-model="info.age" :disabled='isUpdate' /> </el-form-item> </el-col> </el-row> <el-row :gutter="16"> <el-col :span="10"> <el-form-item label="身份证号" prop="id_no"> <el-input clearable maxlength="18" v-model="info.id_no" :disabled='isUpdate' /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="联系方式" prop="phone_no"> <el-input clearable maxlength="11" v-model="info.phone_no" :disabled='isUpdate' /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="调查方式" prop="visit_type"> <el-radio-group v-model="info.visit_type" :disabled='isUpdate'> <el-radio value="自助" label="自助" /> <el-radio value="电话" label="电话" /> <el-radio value="微信" label="微信" /> </el-radio-group> </el-form-item> </el-col> </el-row> </el-form>```vue3如何实现formRef与formRefs校验全部通过才可提交function submit() {}
03-08
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值