将心比心,方得人心~

解决vue element template 引入Tinymce组件,点击添加或编辑按钮后富文本显示内容仍然是一开始的数据的问题

周洲 2020-08-10 18:09:23

原因:子组件Tinymce没有及时初始化。

解决方案:子组件Tinymce跟随父组件弹窗的关闭或打开动态加载。在引入组件处加上v-if判断,代码如下:

<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :width="width">
  <el-form ref="dataForm" :rules="rules" :model="temp">
    <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
      <el-input v-model="temp.title" autocomplete="off"></el-input>
    </el-form-item>
  <el-form-item label="摘要" :label-width="formLabelWidth" prop="abstract">
    <el-input type="textarea" v-model="temp.abstract"></el-input>
  </el-form-item>
  <el-form-item label="内容" :label-width="formLabelWidth" prop="content">
      <tinymce v-model="temp.content" :height="300" v-if="dialogFormVisible"/>
  </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">确 定</el-button>
  </div>
</el-dialog>


打赏

『微信打赏』

Tag标签vue 

我是有底线的