Vue笔记

1，el-table，el-table多选框相关
1.1，多选记忆
el-table多选框，切到其他地方又点回来后，选中之前选择的记录

//在多选框列里面加上:reserve-selection="true"，允许默认选中
<el-table ref="multipleTable" :data="dataResult" >
	<el-table-column type="selection" :reserve-selection="true" ></el-table-column>
</el-table>

1.2，获取多选框选择的值

let data = this.$refs.multipleTable.selection;

1.3，清空多选框选择状态

 this.$refs.multipleTable.clearSelection();

2，弹出框中显示的图片单击放大，显示层跑到弹出框后面

//在viewer外层的div上面加上:modal-append-to-body="false"，为true的时候，显示层会加在父页面上
<div class="demo-image" :modal-append-to-body="false">
  <viewer>
    <img :src="url" v-if="getFileType(url)==='image'" style="height: 200px; width: 95%;cursor: pointer" />
  </viewer>
</div>

3,检测视频时长

//上传组件
<el-upload
  ref="upload"
  class="upload-demo"
  :action="uploadMaterialPath"
  :on-change="getMd5"
  :show-file-list="true"
  :on-success="onSuccess"
  :on-error="onError"
  :http-request="uploadRequest"
  :limit="1"
  :file-list="fileList">
  <el-button size="small" type="primary">新增素材</el-button>
</el-upload>
//上传方法
uploadRequest: function(request) {
	let fileName = request.file.name;
    let index = fileName.lastIndexOf('.');
    let str = fileName.substring(index+1);//文件后缀

	let size = request.file.size;//文件大小  字节

	var content = request.file;
    var url = URL.createObjectURL(content);
    //经测试，发现audio也可获取视频的时长
    var audioElement = new Audio(url);
    audioElement.addEventListener("loadedmetadata", (_event) => {
      var audioDuration = parseInt(audioElement.duration);
      console.log(audioDuration);//视频时长 秒
      
	//后续操作    
    });
}