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

<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的表单验证中也可以写,但是在我的项目里有其他用途,不用纠结这个。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐