新增 编辑弹出框

用的是table的column

js 复制代码
<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");
    });
},
相关推荐
南屿欣风4 分钟前
解决 Gin Web 应用中 Air 热部署无效的问题
前端·gin
猿大师办公助手7 分钟前
Web网页内嵌福昕OFD版式办公套件实现在线预览编辑PDF、OFD文档
前端·pdf·word
demonlg01121 小时前
Go 语言标准库中Channels,Goroutines详细功能介绍与示例
开发语言·后端·golang
幼儿园技术家1 小时前
什么是RESTful 或 GraphQL?
前端
Lonwayne1 小时前
当编程语言有了人格
java·javascript·c++·python·php
秋风&萧瑟1 小时前
【QT】新建QT工程(详细步骤)
开发语言·qt
echola_mendes1 小时前
LangChain 结构化输出:用 Pydantic + PydanticOutputParser 驯服 LLM 的“自由发挥”
服务器·前端·数据库·ai·langchain
拉不动的猪2 小时前
刷刷题46(常见的三种js继承类型及其优缺点)
前端·javascript·面试
关注我:程序猿之塞伯坦2 小时前
JavaScript 性能优化实战:突破瓶颈,打造极致 Web 体验
开发语言·前端·javascript
兰德里的折磨5502 小时前
对于后端已经实现逻辑了,而前端还没有设置显示的改造
前端·vue.js·elementui