<
el-dialog
:title="title"
:visible
.sync="open"
width="1300px"
:modal="false"
append
-to
-body>
<
el-form ref="
form" :
model="
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
-model="
form.plantNo" placeholder="请输入工厂代号" />
</
el-form-item>
<
el-form-item lab
el="工厂名称"
prop="plantName">
<
el-input v
-model="
form.plantName" placeholder="请输入工厂名称" />
</
el-form-item>
<
el-form-item lab
el="产品描述"
prop="plantName">
<
el-input v
-model="
form.plantName" placeholder="请输入产品描述" />
</
el-form-item>
</
el-col>
<
el-col :span="8">
<
el-form-item lab
el="router版本"
prop="routerVersion">
<
el-s
elect v
-model="
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
-model="
form.partNo" placeholder="请输入产品料号" />
</
el-form-item>
</
el-col>
<
el-col :span="8">
<
el-form-item lab
el="旧型号"
prop="plantName">
<
el-input v
-model="
form.plantName" placeholder="请输入工厂名称" />
</
el-form-item>
<
el-form-item lab
el="新型号"
prop="plantName">
<
el-input v
-model="
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
-model="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
-model="process
.englishName" placeholder="English Name" />
</
el-form-item>
</
el-col>
<!
-- 流程卡内容
-->
<
el-col :span="4">
<
el-form-item>
<
el-input v
-model="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
-model="process
.processWatitime" />
</
el-form-item>
</
el-col>
<!
-- 运行(H)
-->
<
el-col :span="2">
<
el-form-item :
prop="`processes
.${index}
.machineRuntime`">
<
el-input v
-model="process
.machineRuntime" />
</
el-form-item>
</
el-col>
<!
-- set_up
-->
<
el-col :span="2">
<
el-form-item>
<
el-input v
-model="process
.setuptime" placeholder="min/pcs" />
</
el-form-item>
</
el-col>
<!
-- 人工
-->
<
el-col :span="2">
<
el-form-item>
<
el-input v
-model="process
.labortime" placeholder="min/pcs" />
</
el-form-item>
</
el-col>
<!
-- 单位/数量：拆分成两个字段
-->
<!
-- 单位
-->
<
el-col :span="2">
<
el-form-item>
<
el-input v
-model="process
.routerUnit" />
</
el-form-item>
</
el-col>
<!
-- 数量
-->
<
el-col :span="2">
<
el-form-item>
<
el-input v
-model="process
.quantity" />
</
el-form-item>
</
el-col>
<!
-- 状态/代码：拆分成两个字段
-->
<!
-- 状况
-->
<
el-col :span="2">
<
el-form-item>
<
el-s
elect v
-model="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
-model="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>修改整体格式来正常显示
本文详细探讨了Vue中v-model如何用于数据双向绑定，以及prop如何作为父组件向子组件传递数据的角色。通过实例分析，阐述了两者在实际开发中的应用场景和最佳实践，帮助开发者理解在前后台数据传输与接收中的核心概念。
扫一扫
645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
