vue+element 模态框表格形式的可编辑表单实现
程序员文章站
2022-09-02 14:19:55
要实现的效果如下,初始化的时候,不可编辑,点击编辑按钮,编辑按钮隐藏,取消编辑按钮显示;部分input输入框变为可编辑
要实现的效果如下,初始化的时候,不可编辑,点击编辑按钮,编辑按钮隐藏,取消编辑按钮显示;部分input输入框变为可编辑
<el-dialog title="营销单详情" width="920px" @close="isedit = false" class="dialog dialogadd" custom-class="custom-dialog" :visible.sync="dialogeditvisible" :close-on-click-modal='false'> <el-form ref="editform" style="margin-right: 20px;" :model="editform" :inline="true" label-position="right" label-width="110px" size="mini"> <el-form-item label="工单号" prop="no"> <el-input v-model="editform.no" disabled></el-input> </el-form-item> <el-form-item label="客户姓名" prop="khxm"> <el-input v-model="editform.khxm" :disabled="!isedit || editform.openid"></el-input> </el-form-item> <el-form-item label="联系电话" prop="khdh"> <el-input v-model="editform.khdh" :disabled="!isedit || editform.openid"></el-input> </el-form-item> <el-form-item label="客户地址"> <el-input v-model="editform.address" disabled></el-input> </el-form-item> <el-form-item label="营销人员-工号"> <el-input v-model="editform.yxry" disabled></el-input> </el-form-item> <el-form-item label="网格区域"> <el-input v-model="editform.qywg" disabled></el-input> </el-form-item> <el-form-item label="业务类型" prop="ywlx"> <el-select v-model="editform.ywlx" :disabled="!isedit" placeholder=""> <el-option v-for="item in ywlxlist" :key="item" :label="item" :value="item"></el-option> </el-select> </el-form-item> <el-form-item label="报装宽带兆数(m)" prop="kdzs" class="long-label"> <el-select v-model="editform.kdzs" :disabled="!isedit" placeholder=""> <el-option v-for="item in kdzslist" :key="item" :label="item" :value="item"></el-option> </el-select> </el-form-item> <el-form-item label="手机基础套餐(最低消费)" class="long-label" prop="sjjctc" > <el-select v-model="editform.sjjctc" :disabled="!isedit" placeholder=""> <el-option v-for="item in sjtclist" :key="item" :label="item" :value="item"></el-option> </el-select> </el-form-item> <el-form-item label="业务受理单截屏"> <p><a class="text-base" @click="show">查看图片</a></p> </el-form-item> <el-form-item label="下单时间" prop="createtime" > <el-input v-model="editform.createtime" disabled></el-input> </el-form-item> <el-form-item label="备注" prop="remark"> <el-input v-model="editform.remark" :disabled="!isedit"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer" v-if="editform.state != 3"> <el-button v-if="!isedit" @click="isedit = true" size="mini">编 辑</el-button> <el-button v-else @click="canceledit" size="mini">取消编辑</el-button> <el-button type="primary" @click="saveedit" size="mini">保 存</el-button> </div> </el-dialog>
data中的数据
editform: {}, // 新增表单 isedit: false, // 是否编辑 dialogeditvisible: false, // 新增模态框 images: [], // 图片信息 ywlxlist: [], // 业务类型列表 kdzslist: ['50', '100', '200', '300'], // 报装宽带兆数列表 sjtclist: ['38', '58', '88', '98', '128', '138', '188'], // 手机基础套餐列表
viewdetail(row){ console.log(row) this.editform = this.deepclone(row) this.dialogeditvisible = true this.$post("/anapi/yxdcontroller/getbyid", {id: row.id}, (data) => { this.editform = data.yxd this.editform.qywg = row.name1 + row.name2 + row.name3 + row.gridname this.editform.address = row.name1 + row.name2 + row.name3 + row.gridname + row.xxdz this.editform.yxry = row.yxcname + '-' + row.yxid this.currentitem = this.deepclone(this.editform) let imgs = data.yxd.imgs || [] this.images = [] imgs.map(item => { this.images.push(this.config.httpheadurl + item) }) }) }, // 保存编辑 saveedit(){ this.$refs.editform.validate((valid) => { if (valid) { this.startloading() this.$post("/api/yxdcontroller/edityxd", this.editform, (data) => { this.$message.success("修改成功!") this.dialogeditvisible = false this.gettabledata(1) }) } }) }, // 取消编辑 canceledit(){ this.isedit = false this.editform = this.deepclone(this.currentitem) }, // 查看图片 inited (viewer) { this.$viewer = viewer }, show () { if(!this.images.length){ this.$message.error("暂无图片") return } this.$viewer.show() },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。