<
el-dialog
:title="title"
:visible.sync="open"
width="1300px"
:modal="false"
append
-to
-body>
<
el-form ref="
form" :mod
el="
form" :rules="rules" lab
el-width="120px" >
<!
-- 第一行字段
-->
<
el-row :gutter="50">
<
el-col :span="8">
<
el-form-item lab
el="工厂代号" prop="plantNo">
<
el-input v
-mod
el="
form.plantNo" placeholder="请输入工厂代号" />
</
el-form-item>
<
el-form-item lab
el="工厂名称" prop="plantName">
<
el-input v
-mod
el="
form.plantName" placeholder="请输入工厂名称" />
</
el-form-item>
<
el-form-item lab
el="产品描述" prop="plantName">
<
el-input v
-mod
el="
form.plantName" placeholder="请输入产品描述" />
</
el-form-item>
</
el-col>
<
el-col :span="8">
<
el-form-item lab
el="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"
:lab
el="dict.lab
el"
:value="dict.value"
/>
</
el-s
elect>
</
el-form-item>
<
el-form-item lab
el="产品料号" prop="partNo">
<
el-input v
-mod
el="
form.partNo" placeholder="请输入产品料号" />
</
el-form-item>
</
el-col>
<
el-col :span="8">
<
el-form-item lab
el="旧型号" prop="plantName">
<
el-input v
-mod
el="
form.plantName" placeholder="请输入工厂名称" />
</
el-form-item>
<
el-form-item lab
el="新型号" 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" :lab
el="dict.lab
el" :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>修改整体格式来正常显示
本文介绍了解决el-dialog中嵌入form表单元素，在浏览器缩放时出现表单元素错位的问题。通过将表单元素的宽度设置为百分比单位，实现了良好的自适应效果。
扫一扫
3199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
