迟到的月总结，虽然会迟但一定会到！卷...卷不动了

回首3月做过的功能以及遇到的问题点，话不多说，上代码瞅瞅~~

1. el-table + vue 实现 table 拖拽

效果图如下：

功能描述：
   点击table表中的行数据，然后用鼠标就可以实现拖拽效果

具体实现：
   // html
      row-key="tableNumber" // 设置table表中的唯一标识
   :row-class-name="tableRowClassName"  // 这个是设置表中某行数据的背景颜色
   >
     
        
     
     
        
     
     
        
     
     
        
     
     
        
     
   
  
   // js
   
 

 顺便还说一下关于 el-time-select 这个组件的小用法：
 类似效果：
 
 
   
      // picker-options: 这里是甚至 固定时间范围供用户选择，从0点开始，以1逐步递增，23点结束，开始时间的最大值要小于结束时间，结束时间的最小值要大于开始时间
      
   
   
      
   
 

 2.  tooltip 文字提示用法

3.  自定义confirm提示内容

methods: {
  handTips(){
    const h = this.$createElement;
    this.$confirm('',{
      distinguishCancelAndClose: true,
      confirmButtonText: 'YES',
      cancelButtonText: 'CANCEL',
      type: 'success',
      customClass: 'xxxx', // 这里可以自定义className
      message:h('div', null, [
        h('div', null, '这里是第一行文本内容'),
        h('div', { style: 'margin-top: 20px' }, '这里是第二行文本内容')
      ])
    })
    .then(()=>{})
    .catch(()=>{})
  }

}
效果如下：【还需要写css样式哈,设置一下图标的大小以及定位位置即可】

4.  上传图片

上传图片：
class="upload-content"
action="上传图片接口地址"
multiple
:show-file-list="false"
:headers="headers"
:data="uploadData"
:before-upload="handleBeforeUpload"
:on-success="handleSuccess"
:on-error="handleError"
:limit="1"
:file-list="fileList"
:on-exceed="handleExceed"
>
 上传图片
 
  
     
  
 

 5. 通过a标签下载pdf文件

当后端小哥返回一个pdf文件的url地址，前端需要点击这个url把pdf文件下载下来的操作

下载pdf文件

methods:{
  handleDownloadPdf(){
     const pdfUrl = 'xxxx';// 假设这个是pdf文件的url地址
     const fileName = 'xxx.pdf';//假设这个是pdf下载后的文件名字
     const xhr = new XMLHttpRequest();
     xhr.open('GET', pdfUrl, true);
     xhr.responseType = 'blob';
     xhr.onload = ()=>{
       const blob = xhr.response;
       const link = document.createElement('a');
       link.download = fileName;
       link.href = URL.createObjectURL(blob);
       document.body.appendChild(link);
       link.click();
       document.body.appendRemove(link);
     }
     xhr.send();
  }
}

6. el-tree 权限树结构可以进行 过滤数据

效果如下：

  
    ref="tree"
  v-loading="treeLoading"
  :data="dataTree"
  :props="defaultProps"
  highlightCurrent
  :check-strictly="false"
  default-expand-all
  node-key="id"
  :filter-node-method="filterNode"
  @node-click="nodeClick"
  >
  

 7. table复选框设置禁用状态以及表头设置红色星号

ref="table"
:data="tableData"
border
:header-cell-class-name="setHeaderCellClassName"
@selection-change="selectionChange"
  
  
  

 8.  数字转化为金额形式(千分位)

效果如下：


export function numTurnThousands(val, digit = 2){
  let res = '';
  if(val === 0){
    return parseFloat(val).toFixed(digit);
  }
  if(!val){
    return '';
  }
  if(val !== ''){
    // 如果val传进来的是number类型，需要先转化为string类型
    let strVal = val+'';
    strVal = parseFloat(strVal.replace(/,/g,'')).toFixed(digit);
    if(strVal.indexOf('.')===-1){
      res = strVal.replace(/\d{1,3}(?=(\d{3}+$))/g,'$1,');
    }else{
      res = strVal.replace(/(\d)(?=(\d{3})+\.)/g,'$1,');
    }
  }else{
    res = '';
  }
  return res;
}

9. 判断用户输入的是手机号还是文字？

场景描述：
   在一个input输入框中，根据用户输入的内容来传递参数，例如：
   假设用户输入 135xxxxxxxx, 那么请求接口所传的参数为   param.mobile = '135xxxxxxx';
   假设用户输入 135你好哈哈哈哈，那么请求接口所传的参数为 param.name = '135你好哈哈哈哈哈哈'；


searchVal(val){
  if(!val || val==='') return;
  var content = val.replace(/(^\s+)|(\s+$)/g,'');
  var regPhone = /^1[3458][0-9]\d{8}$/;
  const param = {};
  
  if(!Number.isNaN(Number(content)) && regPhone(content)){      // Number.isNaN(Number(xxx)) 这个是判断内容是否全是数字，如果全是数字的话，则返回false，反之，则为true。
    param.mobile = content;
  }else{
    param.name = content;
  }

  // 请求接口...
}