时间:2021-05-26
要实现的效果如下,初始化的时候,不可编辑,点击编辑按钮,编辑按钮隐藏,取消编辑按钮显示;部分input输入框变为可编辑
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() },以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
分页的实现(Vue+Element)+输入框关键字筛选1.这里用的是Element自带的分页组件订单列表序号创建时间订单ID所属用户姓名所属用户ID所属用户手机
今年开始学习vue+element实现后台开发,在实现批量删除功能时有2个小知识点记录在下:1、如何实现单击行交替选中当前行的复选框,element官网的tab
本文实例为大家分享了vue+element表格导出为Excel文件的具体代码,供大家参考,具体内容如下安装这三个依赖npminstallxlsxfile-sav
Vue+element实现列表复选框并保存已选id集合1.引用element组件多选框组,checkList为提交后台数据得数组,tableData为数据源2.
由于工作的原因,现在需要实现一个滚动加载(PC端)的效果,之前使用的是vue+element,但是element没有类似的组件,所以去github上找了一个名叫