记录一下在使用 elementui 遇到的三个问题, 以及通过百度最后得以解决的办法

1. elementui 上传多个视频, 并进行预览和删除

<template>
  <div>
    <el-form-item label="项目视频">
      <span style="font-size: 12px;color: #999;">仅支持mp4视频格式，大小不超过200M，最多可一共上传1个视频</span>
      <el-upload
        :action="actionUrlVideo"
        :data="uploadData"
        list-type="picture-card"
        :limit="1"
        :file-list="videoList"
        accept=".mp4">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}" style="height: 100%;">
          <video class="el-upload-list__item-thumbnail" :src="dialogVideoUrl" width="100%" height="100%"></video>
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handleVideoPreview(file)">
              <i class="el-icon-video-play"></i>
            </span>
            <span v-if="!isEdit" class="el-upload-list__item-delete" @click="handleRemove(file)>
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisibleVideo" append-to-body>
        <video width="100%" controls="controls" :src="dialogVideoUrl"></video>
      </el-dialog>
    </el-form-item>
  </div>
</template>

<script>
export default {
  data() {
    return {
      actionUrlVideo: '', // 上传视频地址
      dialogVisibleVideo: false,
      videoList: [], // 视频列表
      uploadData: {fileName: ''}, // 上传文件参数
      dialogVideoUrl: '' // 视频
    };
  },
  methods: {
    // 删除视频
    handleRemove(file) {
      console.log('删除视频');
    },
    // 视频
    handleVideoPreview(file) {
      this.dialogVideoUrl = file.url;
      this.dialogVisibleVideo = true;
    }
  }
};
</script>

2. 复杂的数据对象vue没法感知到数据的变化，当你使用多选框, 对indeterminate做了更改之后，调用this.$forceUpdate();强制刷新