问题描述

写了一个后台管理系统，需求是通过新增按钮，弹出一个dialog来上传 图片，详情(文章)，视频。

不太明白这整个逻辑怎么实现。

问题出现的环境背景及自己尝试过哪些方法

现在的问题就是我在dialog里上传的图片赋值给了上传图片的小dialog，之后怎么在提交过程中传给table里我定义的imgPath。

相关代码

这一部分是table的

<el-table-column  label="图片" width="200" align="center">

<!--插入图片链接的代码-->

<template slot-scope="scope">

<img :src="scope.row.imgPath" alt style="width: 100px;height:50px">

</template>

</el-table-column>

这一部分是dialog的，取自element官网上的upload

<el-form-item label="图片">

<el-upload

action="https://jsonplaceholder.typicode.com/posts/"

list-type="picture-card"

:on-preview="handlePictureCardPreview"

:on-remove="handleRemove">

<i class="el-icon-plus"></i>

</el-upload>

<el-dialog :visible.sync="dialogVisible" size="tiny">

<img width="100%" :src="dialogImageUrl" alt="">

</el-dialog>

</el-form-item>

methods函数里

// 新增

handleAdd(row) {

this.form = {

imgPath: null,

detailURL: "",

videoURL: "",

status: 0

};

this.addVisible = true;

this.$nextTick(() => { // DOM 异步更新

this.$refs['form'].clearValidate(); // 移除校验效果

})

},

// 图片上传

handleRemove(file, fileList) {

console.log(file, fileList);

},

handlePictureCardPreview(file) {

this.dialogImageUrl = file.url;

this.dialogVisible = true;

},

希望能给个实例，或者能帮我讲讲这中间逻辑，有点懵了

element表格里面放图片_Element UI table里上传图片后如何显示在表格里相关推荐

  1. element表格里面放图片_Element ui表格展示图片问题

    在MyBook Live上部署svn 一直以来都在用svn管理源代码,美中不足的是由于svn服务器端部署在本地,无法实现在异地迁入迁出程序,因此考虑将svn服务器部署在我的MyBook Live上. ...

  2. 微信图片消息 服务器故障,解决图片上传到微信服务器后无法显示问题

    标签:attr   ict   viewport   使用   完全   example   cache   ber   copy vue项目里可以添加到app.vue 关于referrer 在页面引 ...

  3. element ui 表格里面放图片

    <el-table:data="markList"borderstyle="width: 100%"><el-table-column typ ...

  4. element表格里面放图片_elementUI 表格中预览图片

    表格中有一列显示的图片,现需要点击图片,预览该图片,使用的elementui中的previewSrcList做的图片预览, 但是测试发现,无论点击表格中的那张图片,预览的大图都是从第一张图片,开始预览 ...

  5. 设置element ui table表格线条颜色以及设置圆角/解决element ui table设置圆角后线条不显示或显示模糊问题，亲测有效

    问题描述 table表格设置为圆角后并且设置table border颜色,设置圆角后导致修改颜色后的border无法显示 问题解决 /* 设置圆角以及边框颜色 */.el-table{border-r ...

  6. elementui表格宽度适应内容_element ui 表格高度自适应

    首先给表格初始一个高度 tableHeight: (window.innerHeight || document.documentElement.clientHeight || document.bo ...

  7. element ui 图片控件 排序_Element-ui上传图片后隐藏上存控件

    在使用Element-ui el-upload组件的时候,发现我只想上存一张图片,比如头像的上存,然而上存一张后,控件还可以继续上存. 一下的方法是Element-ui上传图片后隐藏上存控件. 在el ...

  8. elementui下拉框选择图片_element ui下拉框如何实现默认选择?

    为什么我这样写没反应呢 运营商级别 <el-option v-for="item in options1" :label="item.label" :va ...

  9. elementui下拉框选择图片_Element UI系列：Select下拉框实现默认选择

    [编程题目]一个整数数组,长度为 n,将其分为 m 份,使各份的和相等,求 m 的最大值★★ (自己没有做出来!!) 45.雅虎(运算.矩阵): 2.一个整数数组,长度为 n,将其分为 m 份,使各份 ...

最新文章

  1. App3种开发方式的优劣分析：原生、混合和H5
  2. eclipse环境下配置tomcat服务器
  3. Spring MVC零配置（全注解）（版本5.0.7）
  4. 图像基本群运算--滤波
  5. 50个常用的笔试、面试sql语句
  6. 实现弹出窗口并转到另一个页面
  7. 吐血推荐泛绿色编程工具: EditPlus 已于 2010-07-14 升级到 v3.12(602)
  8. mysql identity_insert_由MYSQL SET IDENTITY_INSERT tablename ON;准确方法
  9. ArcMap怎么导出shape文件到奥维互动地图
  10. 大华存储服务器系统,大华重磅推出64盘位网络视频存储服务器
  11. Qt5.10编写FTP客户端
  12. 告别人工智能的追随角色
  13. 调整html元素大小 resize
  14. speedoffice如何调整Word文档表格单元格大小
  15. 黑马程序员就业班第一天的总结以及自己的看法
  16. 菜鸡随笔第二笔：insmod模块时显示已杀死
  17. 制作U盘启动来安装Linux系统的具体方法（图文）
  18. 局域网用户的限制和反限制技巧
  19. 欧几里得算法、扩展欧几里得算法（特解、应用、通解）
  20. 初学编程，学哪种语言比较好？

热门文章

  1. 强化学习之基于伪计数的探索算法
  2. AI in RTC 创新挑战赛 | 超分辨率挑战开始了！
  3. F-Principle：初探深度学习在计算数学的应用
  4. 图像分割综述：FCN、U-Net、PSPNet、DeepLab
  5. 记一次灵活的模型训练生成的pth转onnx文件失败
  6. python题库刷题训练软件_刷题 -- python计算器练习题
  7. 【Java报错】MultipartFile 类型文件上传 Current request is not a multipart request 问题处理（postman添加MultipartFile）
  8. Error: Network is unreachable. Reason: couldn‘t connect to server localhost:27017（连接mongodb数据库失败）
  9. python怎么玩pdf_如何使用Python玩转PDF各种骚操作？
  10. 最明的int和Integer的区别