elementui 上傳多個視頻 / 復雜數(shù)據(jù)下的多選框 indeterminate變化錯誤

記錄一下在使用 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: ''}, // 上傳文件參數(shù)
      dialogVideoUrl: '' // 視頻
    };
  },
  methods: {
    // 刪除視頻
    handleRemove(file) {
      console.log('刪除視頻');
    },
    // 視頻
    handleVideoPreview(file) {
      this.dialogVideoUrl = file.url;
      this.dialogVisibleVideo = true;
    }
  }
};
</script>

2. 復雜的數(shù)據(jù)對象vue沒法感知到數(shù)據(jù)的變化，當你使用多選框, 對indeterminate做了更改之后，調用this.$forceUpdate();強制刷新

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容