vue结合el-upload与el-input实现自制简易富文本编辑器，支持上传图片，需要有个接口把本地图片转成在线链接

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;
      }
    },