vue页面点击修改页面循环渲染元素中的数据的值不生效,我的建议是双管齐下
gotoEdit(i) {
this.$set(this.reportList[i], "editStatus", true);
this.$forceUpdate();
},
vue结合el-upload与el-input实现自制简易富文本编辑器,支持上传图片,需要有个接口把本地图片转成在线链接
展示
编辑
<template v-if="pageStatus !== 'see'">
<span
v-if="item.editStatus"
@click="
(item.editStatus = false),
setDetailOrAdd('dontCloseWindow')
"
title="确定"
class="buttonStyle over"
></span
><span
v-else
@click="gotoEdit(i)"
title="编辑"
class="buttonStyle edit"
></span> </template
>
</div>
<el-input
class="main-part"
v-if="item.editStatus"
v-model="item.propertyValue"
placeholder="请输入内容"
style="width: 100%;height: 300px;"
type="textarea"
show-word-limit
></el-input>
<div v-else class="main-part" v-html="item.propertyValue"></div>
<!-- <div
v-if="item.editStatus"
class="main-part"
:contenteditable="pageStatus !== 'see' ? true : false"
v-html="item.propertyValue"
></div> -->
<div v-if="item.editStatus" class="add-button">
<el-upload
class="upload"
action="/cbrc/file/upload"
:on-success="
(response, file, fileList) =>
upsuccessImg(response, file, fileList, i)
"
:headers="header"
:show-file-list="false"
:on-remove="deletefileImg"
:before-upload="handleChangeImg"
:file-list="imgList"
ref="uploadImg"
>
<el-button type="primary" class="blue"
>添加图片<i class="el-icon-upload el-icon--right"></i
></el-button>
</el-upload>
</div>
gotoEdit(i) {
this.$set(this.reportList[i], "editStatus", true);
this.$forceUpdate();
},
upsuccessImg(response, file, fileList, index) {
if (response.code == 200) {
this.attachmentLists = fileList;
if (this.attachmentLists && this.attachmentLists[0].response) {
this.attachmentLists[0].response.data.forEach(item => {
this.imgList.push({
name: item.attachName,
url: item.attachPath
});
// 上传成功就拼接成富文本
const setOver =
this.reportList[index].propertyValue +
('<br /><img src="/cbrc' + item.attachPath + '" ><br />');
this.$set(this.reportList[index], "propertyValue", setOver);
});
}
this.imgList=[];
} else {
this.$message.error("图片添加失败");
}
},
//附件删除
deletefileImg(file, fileList) {
var url = "";
if (file.url) {
url = file.url;
} else {
url = file.response.data[0].attachPath;
}
this.$http({
method: "GET",
url: "/cbrc/file/del?filePath=" + url
}).then(res => {
if (res) {
this.fileList = [];
this.fileName = "";
this.attachmentLists = fileList;
this.$message.success("删除成功");
}
});
},
handleChangeImg(file, fileList) {
var size = file.size / 1024 / 1024;
if (size > 10) {
this.$message.warning("上传文件大小不能大于10M");
return false;
}
},