vue 笔记 代码摘录

<!-- table  高度固定 -->
<div class="dialogDiv">
<!--vue 中文 搜索转义 -->
        <el-table v-loading="bookLoading" :data="drugbookList.filter(data => !search || decodeURI(data.drugName).toLowerCase().includes(decodeURI(search.toLowerCase())))" >


    <el-table v-loading="loading" :data="infoList">
<!-- 字典格式化 -->
              <el-table-column label="类型" width="90" align="center" prop="type" :formatter="typeFormat" />

    <!-- 时间戳格式化 -->
   <template slot-scope="scope">
         <span>{{ parseTime(scope.row.startTime, '{yy}-{m}-{d}') +"/"+ parseTime(scope.row.endTime, '{yy}-{m}-{d}') }}</span>
        </template>
<!-- 富文本显示  -->
<el-table-column label="规格" align="left" max-height="120" prop="Val">
          <div slot-scope="scope" v-html="scope.row.Val">            
            {{scope.row.Val}}
          </div>
        </el-table-column>
    </el-table>


</div>
<style lang="scss" scoped>           
    .dialogDiv {
        height: 550px;
        overflow: auto;
    }
</style>

<!-- 富文本 -->

import WangEditor from "wangeditor";
import { uploadFilesWeb } from "@/api/imageText/imageText"

initEdit(Val){
      // 检测富文本编辑器
      if(!this.wanEditor) {
        setTimeout(() => {
          this.wanEditor = new WangEditor("#EditorId");
          console.log(this.wanEditor.config);
          this.wanEditor.config.zIndex = 10
          this.wanEditor.config.uploadImgShowBase64 = false   // 使用 base64 保存图片
          this.wanEditor.config.height = 450
          this.wanEditor.config.customUploadVideo = function (resultFiles, insertVideoFn) {
            //  console.log(resultFiles[0]);
            let formData = new FormData();
            formData.append("files", resultFiles[0]);
            uploadFilesWeb(formData).then((response) => {
              if (response.code === 200) {
               
               // resultFiles 是 input 中选中的文件列表
              // insertVideoFn 是获取视频 url 后，插入到编辑器的方法
          
              // 上传视频，返回结果，将视频地址插入到编辑器中
              insertVideoFn(response.data.imgUrl[0].imgUrl)
             //  insertVideoFn(videoUrl)
             } else {
               this.msgError(response.msg);
             }
            })
          }
          this.wanEditor.config.customUploadImg = function(resultFiles, insertImgFn) {
            let formData = new FormData();
            formData.append("files", resultFiles[0]);
            uploadFilesWeb(formData).then((response) => {
              if (response.code === 200) {
               insertImgFn(response.data.imgUrl)
             } else {
               this.msgError(response.msg);
             }
            })
          }
          this.wanEditor.config.onchange =  (html)=> {
            // html 即变化之后的内容
            this.form.info = html
          }
          this.wanEditor.create()
          this.wanEditor.txt.html(Val);
        }, 100);
      } else {
        this.wanEditor.txt.clear()
        this.wanEditor.txt.html(Val);
      }
    }