0
点赞
收藏
分享

微信扫一扫

Element UI (el-form表单)

fbd4ffd0717b 2022-02-11 阅读 41

el-form-item中label左(或右)对齐

<el-form :model="assets" ref="assetsForm">
	<el-row>
		<el-col :span="12">
			<el-form-item label="资产名称:" style="display: flex;justify-content: space-between">
				<el-input style="width: 190px" v-model="assets.name" placeholder="资产名称"></el-input>
			</el-form-item>
		</el-col>
		<el-col :span="12">
			...
		</el-col>
	</el-row>
</el-form>

--- ">>>",这个是深度选择器,可以在style 为scoped的时候找到你的dom进行修改.
--- 因为必选字段的*,这个符号(还有字数不相同等原因)会对对齐效果造成一定影响,所以先给label和input一个固定的宽度,再设置label的左对齐或者右对齐
<style scoped>
    .el-form >>> .el-form-item .el-form-item__label {
        width: 30%;
        /*label 右对齐*/
        display: inline-block;
        /*label 左对齐*/
        /*display: flex;*/
    }
</style>
举报

相关推荐

0 条评论