問題描述

寫了一個后臺管理系統(tǒng)，需求是通過新增按鈕，彈出一個dialog來上傳 圖片，詳情(文章)，視頻。

不太明白這整個邏輯怎么實現(xiàn)。

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

現(xiàn)在的問題就是我在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官網(wǎng)上的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函數(shù)里

// 新增

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里上传图片后如何显示在表格里的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。