<
el-dialog
:title="title"
:visible
.sync="open"
width="1300px"
:modal="false"
append
-to
-body>
<
el-form ref="
form" :mod
el="
form" :rules="rules"
label-width="120px" >
<!
-- 第
一行字段
-->
<
el-row :gutter="50">
<
el-col :span="8">
<
el-form-item
label="工厂代号" prop="plantNo">
<
el-input v
-mod
el="
form.plantNo" placeholder="请输入工厂代号" />
</
el-form-item>
<
el-form-item
label="工厂名称" prop="plantName">
<
el-input v
-mod
el="
form.plantName" placeholder="请输入工厂名称" />
</
el-form-item>
<
el-form-item
label="产品描述" prop="plantName">
<
el-input v
-mod
el="
form.plantName" placeholder="请输入产品描述" />
</
el-form-item>
</
el-col>
<
el-col :span="8">
<
el-form-item
label="router版本" prop="routerVersion">
<
el-s
elect v
-mod
el="
form.routerVersion" placeholder="请输入router版本" >
<
el-option
v
-for="dict in dict
.type
.router_version"
:key="dict
.value"
:
label="dict
.label"
:value="dict
.value"
/>
</
el-s
elect>
</
el-form-item>
<
el-form-item
label="产品料号" prop="partNo">
<
el-input v
-mod
el="
form.partNo" placeholder="请输入产品料号" />
</
el-form-item>
</
el-col>
<
el-col :span="8">
<
el-form-item
label="旧型号" prop="plantName">
<
el-input v
-mod
el="
form.plantName" placeholder="请输入工厂名称" />
</
el-form-item>
<
el-form-item
label="新型号" prop="plantName">
<
el-input v
-mod
el="
form.plantName" placeholder="请输入工厂名称" />
</
el-form-item>
</
el-col>
</
el-row>
<!
-- 第二行字段
-->
<!
-- 工序列表动态生成
-->
<!
-- 表头行
-->
<
el-row :gutter="50" class="header
-row">
<
el-col :span="2">名称</
el-col>
<
el-col :span="2">英文名</
el-col>
<
el-col :span="4">流程卡内容</
el-col>
<
el-col :span="2">等待(h)</
el-col>
<
el-col :span="2">运行(H)</
el-col>
<
el-col :span="2">set_up</
el-col>
<
el-col :span="2">人工</
el-col>
<
el-col :span="2">单位</
el-col>
<
el-col :span="2">数量</
el-col>
<
el-col :span="2">状况</
el-col>
<
el-col :span="2">代码</
el-col>
<
el-col :span="2">操作</
el-col>
</
el-row>
<!
-- 数据行循环
-->
<div v
-for="(process, index) in
formData
.processes" :key="index" class="process
-row">
<
el-row :gutter="50">
<!
-- 工序名称
-->
<
el-col :span="2">
<
el-form-item :prop="`processes
.${index}
.processName`" :rules="rules
.processName">
<
el-input v
-mod
el="process
.processName" placeholder="工序名称" />
</
el-form-item>
</
el-col>
<!
-- 英语名称
-->
<
el-col :span="2">
<
el-form-item :prop="`processes
.${index}
.englishName`" :rules="rules
.englishName">
<
el-input v
-mod
el="process
.englishName" placeholder="English Name" />
</
el-form-item>
</
el-col>
<!
-- 流程卡内容
-->
<
el-col :span="4">
<
el-form-item>
<
el-input v
-mod
el="process
.cardContent" type="textarea" :autosize="{ minRows: 1, maxRows: 3}" />
</
el-form-item>
</
el-col>
<!
-- 时间参数组：拆分成4个字段
-->
<!
-- 等待(h)
-->
<
el-col :span="2">
<
el-form-item :prop="`processes
.${index}
.processWatitime`">
<
el-input v
-mod
el="process
.processWatitime" />
</
el-form-item>
</
el-col>
<!
-- 运行(H)
-->
<
el-col :span="2">
<
el-form-item :prop="`processes
.${index}
.machineRuntime`">
<
el-input v
-mod
el="process
.machineRuntime" />
</
el-form-item>
</
el-col>
<!
-- set_up
-->
<
el-col :span="2">
<
el-form-item>
<
el-input v
-mod
el="process
.setuptime" placeholder="min/pcs" />
</
el-form-item>
</
el-col>
<!
-- 人工
-->
<
el-col :span="2">
<
el-form-item>
<
el-input v
-mod
el="process
.labortime" placeholder="min/pcs" />
</
el-form-item>
</
el-col>
<!
-- 单位/数量：拆分成两个字段
-->
<!
-- 单位
-->
<
el-col :span="2">
<
el-form-item>
<
el-input v
-mod
el="process
.routerUnit" />
</
el-form-item>
</
el-col>
<!
-- 数量
-->
<
el-col :span="2">
<
el-form-item>
<
el-input v
-mod
el="process
.quantity" />
</
el-form-item>
</
el-col>
<!
-- 状态/代码：拆分成两个字段
-->
<!
-- 状况
-->
<
el-col :span="2">
<
el-form-item>
<
el-s
elect v
-mod
el="process
.routerStatus" placeholder="状态">
<
el-option v
-for="dict in dict
.type
.router_status" :key="dict
.value" :
label="dict
.label" :value="dict
.value" />
</
el-s
elect>
</
el-form-item>
</
el-col>
<!
-- 代码
-->
<
el-col :span="2">
<
el-form-item>
<
el-input v
-mod
el="process
.processCode" />
</
el-form-item>
</
el-col>
<!
-- 操作按钮
-->
<
el-col :span="2">
<
el-button type="danger" icon="
el-icon
-d
elete" circle @click="removeProcess(index)" />
</
el-col>
</
el-row>
</div>
</
el-form>
<div slot="footer" class="dialog
-footer">
<
el-button type="primary" @click="submit
Form">确 定</
el-button>
<
el-button @click="canc
el">取 消</
el-button>
</div>
</
el-dialog>修改整体格式来正常
显示
本文介绍了在Element UI框架中如何实现一行显示多个el-form-item和el-input组件，并保持label与输入框的对齐。方法一是通过设置el-form-item的label-width属性，方法二是利用el-col组件调整el-input的宽度。这两种方法可以灵活地在前端页面上创建紧凑且布局整齐的表单元素。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
