java之学习记录 5 - 2 - vue&Element-UI使用期间遇到的问题及部分代码记录（番外篇）

本文链接：https://blog.csdn.net/dear_zx/article/details/112694179

拷贝vue项目到本地，运行出错时：

删除node_module文件，执行 npm install

引入simplemde文本域：

执行命令

npm install simplemde --save    //markdown编辑器
npm install font-awesome --save    //FontAwesome字体图标
npm install showdown --save    //转换markdown语法

模块

<template>
  <textarea ref="editor"></textarea>
</template>

<script>
import SimpleMDE from "simplemde";
import 'font-awesome/css/font-awesome.min.css'

export default {
  name: "Editor",
  props: {
    value: String
  },
  mounted() {
    this.simplemde = new SimpleMDE({
      element: this.$refs.editor,
      spellChecker: false
    });
    this.simplemde.codemirror.on("change", this.handleInput);
    this.value && this.simplemde.value(this.value);
  },
  destroyed() {
    this.simplemde = null;
  },
  methods: {
    handleInput() {
      this.$emit("input", this.simplemde.value());
    }
  },
  watch: {
    value(val) {
      val !== this.simplemde.value() && this.simplemde.value(val);
    }
  }
};
</script>

<style src="simplemde/dist/simplemde.min.css"/>

vue.js部分代码记录：

跳转到其他路由：

// name 路由名称，courseId 参数
this.$router.push({ name, params: { courseId: id } });

获取路由传递的参数：

this.$route.params.courseId;

vue&Element-UI文件上传：

页面部分：

        <!-- 上传图片部分 -->
        <el-form-item label="分享小图" prop="share_image_title">
          <el-input v-model="course.share_image_title" type="text">
            <!-- :auto-upload="false",取消自动上传, :on-change="onchange" 调用onchange进行处理 -->
            <el-upload
              slot="prepend"
              :auto-upload="false"
              :on-change="onchange"
              action
              :limit="1"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-input>
        </el-form-item>

js部分

FormData 的主要用途有两个

1. 将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。
2. 异步上传文件
3. 创建FormData对象

// 创建FormData对象，将图片与表单其他内容一同上传
this.params = new FormData();

// 设置Content-type的类型为：多部件上传
let config = {
    header:{
        "Content-type":"multipart/form-data"
    }
}
// 获取表单数据 保存到param中
for(let key in this.course){
    this.params.append(key,this.course[key])
}
// 请求后台接口 保存信息
axios.post("/courseSalesInfo",this.params,config).then(res=>{
    if(res.data.status == 0){
        // 保存成功，跳转回首页
        this.$router.back();
    } else if(res.data.status == 1) {
        this.$message.error(res.data.msg);
    }
}).catch(error => {
    this.$message.error("保存信息失败！");
})

当列表中有多项select时

v-for里面数据层次太多，选择过数据变了，页面没有重新渲染，需手动强制刷新。

@change="$forceUpdate()" 强制刷新

    <el-form label-position="right" label-width="110px" :model="statusForm">
        <el-form-item label="状态变更为：">
          <el-select @change="$forceUpdate()" v-model="statusForm.status" style="width: 100%">
            <el-option
              v-for="(item,index) in Object.keys(statusMapping)"
              :key="index"
              :label="statusMapping[item]"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>