主要使用element-ui中的el-dialog控件,使用场景如下:
表单对话框的标题
根据当前的添加、修改操作展示不同对话框标题。
operation_type: "",
textMap: {
create: "添加设备",
edit: "修改设备",},
添加
<el-button type="text" icon="el-icon-circle-plus-outline" @click="handleAddDev">
添加
</el-button>
//点击“添加”按钮
handleAddDev() {
this.operation_type = "create"; //对话框标题显示为"添加设备"
this.dialogFormVisible = true; //显示对话框
},
<!-- 添加嵌套表单,选择设备的详细信息 -->
<el-dialog :title="textMap[operation_type]" :visible.sync="dialogFormVisible"
width="500px" @close="dialogClosed">
<!-- 添加设备---弹出框界面参数---增加表单验证form_rules -->
<el-form :model="form" size="small" :rules="form_rules" ref="form">
<el-form-item label="设备ID" :label-width="formLabelWidth">
<el-input v-model="form.dev_id" autocomplete="off" clearable style="width: 220px"></el-input>
</el-form-item>
<el-form-item label="设备名称" :label-width="formLabelWidth" >
<el-input v-model="form.dev_name" autocomplete="off" clearable style="width: 220px" ></el-input>
</el-form-item>
<el-form-item label="设备品牌" :label-width="formLabelWidth" prop="dev_manufacturer">
<el-select v-model="form.dev_manufacturer" placeholder="请选择品牌">
<el-option
v-for="item in CameraBrand"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="设备类型" :label-width=