项目知识点总结-关于js部分（比较杂）

1、el-upload 的上传遇到的问题

要循环多个 el-upload 上传 传参问题，里面使用了bind()，进行传参。

	<div class="row-item" style="width: 50%" v-for="(self, selfInx) in getSelfList" :key="selfInx">
		<el-upload  class="upload-demo" :ref="`uploadPictureRef${selfInx}`" :on-remove="handleFileRemove.bind(null, { index: selfInx, type: 1, fileCount: self.fileCount })" :http-request="uploadFileFuc.bind(null, { index: selfInx, type: 1, fileCount: self.fileCount })" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" action="" :file-list="self.itemValueStr">
	      <el-button class="user-form-search-btn" icon="el-icon-upload">上传</el-button>
	  	</el-upload>
	</div>
	//文件上传
	uploadFileFuc(obj, params) {
		console.log(obj, params, 'obj, params');	//obj为传参的大对象，params为上传的文件信息
	}
	//文件删除
	handleFileRemove(obj, file, fileList) {
	   console.log(obj, file, fileList, 'obj, params');
	}

2、el-upload 上传失败的时候，如果 :show-file-list=“true” 但又不想展示上传失败的文件，可以手动去除。

也是以循环出来的，多个上传为例
uploadPictureRef${upIndex}为自定义的ref，只要找到uploadFiles里面对应的上传失败的文件就可以了

	
	const idx = this.$refs[`uploadPictureRef${upIndex}`][0].uploadFiles.findIndex(item => item.uid === file.uid)
	this.$refs[`uploadPictureRef${upIndex}`][0].uploadFiles.splice(idx, 1)

3、在开发中，遇到了前端上传到oss上，然后在传给后端的问题。

这是上传示例

	let file = params.file;
		
	let index = file.name.lastIndexOf(".");
    let type = file.name.substr(index);
    let filenameTimp = `${new Date().getTime()}${type}`; //时间戳文件名

	this.$clientUpload.put(filenameTimp, file).then((res) => {
         if (res.res.status == 200) {
         	console.log('=====', res);
         } else {
             this.$message.error("上传失败，请重新上传！");
         }
     }).catch((err) => {
         this.$message.error("上传失败，请重新上传！");
     });
     

this.$clientUpload 的配置及使用

	//oss.js文件
	// 阿里云oss存储
	const OSS = require('ali-oss')
	const clientUpload = new OSS({
	    // region填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
	    region: 'oss-cn-hangzhou',
	    // 阿里云账号RAM用户进行API访问或日常运维。
	    accessKeyId: '这里填自己的',
	    accessKeySecret: '这里填自己的',
	    bucket: 'enn-gis',
	    timeout:1000*60*30		//上传之间限制
	})
	export default clientUpload


	//main.js的配置
	
	//引入oss上传文件
	import clientUpload from '@/utils/oss.js'
	//全局挂载
	Vue.prototype.$clientUpload = clientUpload

4、上传的时候，图片和文件的校验问题

每次都会遇到，然后再去百度查，这次做个整理

    let filename = params.file.name; //原文件名
    let filesType = filename.substring(filename.lastIndexOf('.')).toLowerCase()
    const picTypeFlag = /^.png|.jpg|.jpeg|.gif$/.test(filesType)           //图片验证
    const fileTypeFlag = /^.doc|.docx|.xls|.xlsx|.pdf$/.test(filesType)           //文件验证
    const videoType = /\.(mp4|avi|mov|flv|wmv|mkv)$/.test(filesType);      //视频验证
    const videoFileType = /\.(mp4|avi|mov|flv|wmv|mkv|png|jpg|jpeg|gif)$/.test(filesType);      //视频+图片
    

5、循环 el-form 表单,以及校验问题。

	<div v-for="(bigTask, index) in customerTypeArr" :key="bigTask.id">
	     <el-form :model="bigTask.assginForm" :ref="`customerTypeArrRef${index}`" class="demo-ruleForm">
	     <el-form-item label="名称" prop="name" :rules="minAssginFormRules.name">
              <el-input placeholder="请输入" v-model="bigTask.assginForm.name" clearable>
              </el-input>
          </el-form-item>
	     </el-form>
	 </div>
	
	//数据结构
	customerTypeArr：[
		{
			assginForm:{
				name:"",
			}
		}
	],
	minAssginFormRules:{
		name: [{ required: true, message: '请输入', trigger: 'blur' },],
	},

	//表单校验
	for (let i = 0; i < this.customerTypeArr.length; i++) {
       // console.log(this.$refs[`customerTypeArrRef${i}`]);
       if (this.$refs[`customerTypeArrRef${i}`]) {   //如果找到这个`customerTypeArrRef${i}`,ref-继续进行表单验证
           this.$refs[`customerTypeArrRef${i}`][0].validate(valid => {
               if (!valid) return
               console.log('----')
          })
       }
    }

6、el-date-picker 带快捷键选项的问题（自定义快捷键）

		<el-date-picker
           v-model="selfTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="selfTimeChange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            popper-class="leftSelfCheck"
            :picker-options="pickerOptions">
        </el-date-picker>

		pickerOptions: {
            shortcuts: [
                {
                    text: '全部',
                    onClick:(picker)=> {
                        this.changStatus(picker,0)
                    }
                },
                {
                    text: '最近1',
                    onClick:(picker)=> {
                        this.changStatus(picker,1)
                    }
                },
                {
                    text: '最近2',
                    onClick:(picker)=> {
                        this.changStatus(picker,2)
                    }
                }
            ]
        },
		
		//点击事件，点击快捷选项的时候，改变按钮对应的颜色
	 	changStatus(picker,type){
	        function setBackground(target) {
	            target.css({ color: "#409EFF" });
	            target.siblings("button").css({ color: "#606266" });
	        }
	        //点击某一个元素时手动添加第一次选中样式
	        const dom = $(picker.$el).find(".el-picker-panel__shortcut")[type]; 
	        setBackground($(dom));
        },

这里有个点击时间，弹出弹框的时候，要默认选中第一个，我这里是只改变了按钮的颜色。

<style lang="scss">
    .leftSelfCheck{
        .el-picker-panel__shortcut:first-child{
            color: #409EFF;
        }
    }
</style>

清空时间时，所有的按钮颜色恢复原色

$(`.el-picker-panel__shortcut`).css({'color':'#606266'});

7、el-table勾选，切换分页时，回显问题。

	<el-table
            :data="list"
            style="width: 100%"
            ref="customerManaRef"
            @selection-change='handleSelectionChange'
            :row-key="(row)=>{ return row.id}"
          >
          <el-table-column type="selection" align="center" reserve-selection> </el-table-column>
   </el-table>
   
	handleSelectionChange(val){
		console.log(val);
	}

8、el-cascader级联报错问题

for watcher “options”: “TypeError: Cannot read properties of null (reading ‘level’)”
在开发中，遇到使用级联选择器，新增的时候是正常的。但是在编辑的时候，级联框会打开两栏，会有报错信息。百度查找后，发现只要给el-cascader添加唯一key值即可,我这里是用时间戳，作为唯一值。

<el-cascader :key="resetCascader" v-model="value" filterable clearable collapse-tags>
</el-cascader>

this.resetCascader = new Date().getTime();