<
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>循环生
成部分，标题有换行，数据显示布局不对，跟标题也不对应，数据无法显示，数据显示超出form
本文介绍如何在ElementUI的表格组件中正确实现表头自定义，特别是加入el-input组件作为搜索框的方法。通过将slot属性更改为#header，可以确保表头中的输入框正常显示并工作。
扫一扫
1726
到【灌水乐园】发言
