一点小js方法( 图片放大懒加载、全选反选、分页，原生ajax，正则表达式)

 图片放大懒加载

html

 	<div class="figureGroup" id="imgId" style="display: flex;flex-flow: row wrap;margin-top: 20px">
       <div v-for="(draws,index) in pd.drawsPic" style="display: flex;flex-direction: column;justify-content: center;align-items: center">
             <img style="width: auto;height: auto;max-height: 100px;" class="figure"
                  :src="getImgUrl(draws)" alt="">
             <label style="width:180px;height:20px;text-align:center;display:block">图{{index + 1}}</label>
         </div>
     </div>

js 

             if(vm.drawsList1!=null&&vm.drawsList1!='undefined'&&vm.drawsList1!=''&&vm.drawsList1.length>0){
                        const ViewerDom1 = document.getElementById('imgId');
                        const viewer1 = new Viewer(ViewerDom1, {
                            url: "data-original"
                        });
                    }

方法 

 //拼接图片地址
  getImgUrl(imgname){
    return imgname;
    },

全选1+反选

 <el-checkbox-group v-model="checkboxGroup1">
     <el-checkbox-button v-for="option in options" :label="option" :key="option">{{option}}</el-checkbox-button>
</el-checkbox-group>


<el-checkbox v-model="selectAll" @change="handleCheckAllChange1()">全选</el-checkbox>
<el-checkbox v-model="invert1" @change="handleInvertCheckChange1()">反选</el-checkbox>

 const genOptions = ['姓名','性别','年龄']; 
//全选
                handleCheckAllChange1() {
                    this.checkboxGroup1 = this.selectAll ? genOptions:[];
                    this.invert1 = false;
                },
                //反选
                handleInvertCheckChange1() {
                    let cities = genOptions;
                    let checkedCities = this.checkboxGroup1;
                    if (checkedCities.length === 0) {
                        this.checkboxGroup1 = this.invert1 ? genOptions : [];
                    } else if (checkedCities.length === cities.length) {
                        this.checkboxGroup1 = [];
                        this.selectAll = false;
                    } else {
                        let list = cities.concat(checkedCities).filter((v, i, array) => {
                            return array.indexOf(v) === array.lastIndexOf(v);
                        });
                        this.checkboxGroup1 = list;
                    }
                },

全选2

<el-checkbox v-model="allGeo" @change="clickAll">全选</el-checkbox>


<ul>
    <li v-for="(data,index) in varList">
    <el-checkbox v-model="singleGeo" :label="data">
        <p>111</p> 
    </el-checkbox>
   </li>
</ul>

  clickAll() {
      this.singleGeo = [];
      if (this.allGeo){
         for (let i = 0; i <vm.varList.length ; i++) {
             this.singleGeo.push(vm.varList[i])
             }
         }
      },

vue分页，后端只需要返回总数

  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="page.currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size.sync="page.showCount"
    layout="total, sizes, prev, pager, next, jumper"
    :total=page.totalResult>
   </el-pagination>

handleSize:10,
indexSize:1, 


handleSizeChange(val) {
   this.handleSize = val;
   this.goSearch();
   console.log(`每页 ${val} 条`);
 },

 handleCurrentChange(val) {   //下一页序号，页码*数量
   this.page.currentPage= val;
   this.indexSize= (val-1)*this.handleSize+1;    
   this.goSearch();
   console.log(`当前页: ${val}`);
 },

ajax 跳转页面 传递参数过大

转为post传到后端，存到数据库或redis， 跳转页面携带id，新页面再取出

原生ajax，下载导出文档

 downLoadExcelGen1() {
                    let excelContent = this.checkboxGroup1.join(',');
                    let data = {};
                    data = {
                        excelContent:excelContent,
                        exp:expContent,
                        numStart:this.numStart,
                        numEnd:this.numEnd,
                        tm:new Date().getTime()
                    }
                    var xhr = new XMLHttpRequest()
                    xhr.withCredentials = true
                    xhr.responseType = 'arraybuffer';
                    xhr.onreadystatechange = function () {
                        if (this.readyState == 4) {
                            if (this.status == 200) {
                                // const blob = this.response;
                                let blob = new Blob([xhr.response])
                                const reader = new FileReader();
                                reader.readAsDataURL(blob); // 转换为base64，可以直接放入a表情href
                                reader.onload = function (e) {
                                    const a = document.createElement('a');
                                    a.download = '地标信息.xls';
                                    a.href = e.target.result;
                                    document.documentElement.appendChild(a);
                                    a.click();
                                    a.remove(); // 等价于document.documentElement.removeChild(a);
                                }
                            } else {
                                // console.log(xhr.response)
                                setPop3("登录失效!", "请求服务器无响应，稍后再试", "warning");
                            }
                        }
                    }
                    xhr.open('POST', httpurl + 'landmark/downLoadExcelGen1')
                    xhr.setRequestHeader("content-type", "application/json; charset=UTF-8")
                    xhr.send(JSON.stringify(data))
                },

正则表达式

//替换书名号及内容
 let aaa = "saddkasdas《dnsad/amsda.txt》ajsoidasdiaos";
 let bbb = aaa.replace(/\《([^》《]*)\》/ig,"文档");
//身份证号码校验
 var isIdentityNum = /^[1-8]{2}[0-9]{4}[0-9]{4}((0[1-9]{1})|(1[0-2]{1}))((0[1-9]{1})|(1[0-9]{1})|(2[0-9]{1})|(3[0-1]{1}))[0-9]{3}[0-9xX]{1}$/;
//手机号码校验
var myreg = /^1[3456789]\d{9}$/;