新增 编辑弹出框
<el-dialog
:title="title"
:visible.sync="open"
width="552px"
append-to-body
@close="handleClose"
>
<el-form :model="formData" label-width="100px">
<el-row>
<el-col
:span="12"
v-for="(item, index) in columns"
:key="index"
>
<el-form-item :label="item.label" :prop="item.prop">
<template v-if="item.type === 'input'">
<el-input
v-model="formData[item.prop]"
:placeholder="'请输入' + item.label"
></el-input>
</template>
<template v-else-if="item.type === 'select'">
<el-select
v-model="formData[item.prop]"
:placeholder="'请选择' + item.label"
>
<!-- 这里的 options 数据根据 item.equipmentType 或其他条件来动态生成 -->
<el-option
v-for="(option, idx) in getOptions(
item.prop
)"
:key="idx"
:label="option.label"
:value="option.value"
></el-option>
</el-select>
</template>
</el-form-item>
</el-col>
</el-row>
<el-form-item class="dialog-footer">
<el-button size="small" @click="resetForm">取消</el-button>
<el-button size="small" type="primary" @click="submitForm"
>保存</el-button
>
</el-form-item>
</el-form>
</el-dialog>
columns: [
{ type: "input", label: "路段名称", prop: "roadName" },
{ type: "select", label: "方向", prop: "direction" },
{ type: "input", label: "开始桩号", prop: "startStakeNo" },
{ type: "input", label: "结束桩号", prop: "endStakeNo" },
{ type: "input", label: "布设里程", prop: "distance" },
{
type: "select",
label: "设备类型",
prop: "equipmentType",
},
{ type: "input", label: "设备名称", prop: "equipmentName" },
],
formData: {
id: "",
roadName: "",
direction: "",
startStakeNo: "",
endStakeNo: "",
distance: "",
equipmentType: "",
equipmentName: "",
},
getOptions(prop) {
// 根据prop字段返回不同的options
if (prop === "direction") {
return [
{ label: "上行", value: "上行" },
{ label: "下行", value: "下行" },
];
} else if (prop === "equipmentType") {
return [
{ label: "诱导灯", value: "诱导灯" },
{ label: "能见度检测仪", value: "能见度检测仪" },
{ label: "诱导设备", value: "诱导设备" },
{ label: "警示装置", value: "警示装置" },
];
}
return [];
},
点击取消清空对象的值
resetForm() {
Object.keys(this.formData).forEach((key) => {
this.formData[key] = "";
});
},
编辑赋值
handleDetail(id) {
getCurrentFacility(id).then(({ data }) => {
this.open = true;
this.title = "编辑";
Object.keys(this.formData).forEach((key) => {
this.formData[key] = data[key];
});
console.log(this.formData, "res");
});
},