项目问题解决

353 阅读1分钟

简介

个人在工作用遇到的一些小问题,和比较好的方法(持续更新)

element table 批量获取选择的行的数据(selection 勾选框)

第一种:

代码实现:

在<el-table >添加属性 ref = "multipleTable " ,
在<el-table-colum> 添加type属性 type=" selection "

再通过一下代码就能获取已选择的行的数据;
this.$refs.multipleTable.selection
这里的 multipleTable 是上面ref 的值;

第二种:

return 里定义数组, 用来存放选中数据
return { selectList: [] }
table 标签添加 @selection-change

2021051208490584.png

20210512084927490.png 方法内对数组进行赋值

20190428091259131.png

下载文件

Export2Excel() {
      if (this.value1 !== null) {
        for (var i = 0; i < this.value1.length; i++) {
          var datetime1 = this.getnewData(this.value1[0])
          var datetime2 = this.getnewData(this.value1[1])
          this.Exportlist.starttime = datetime1
          this.Exportlist.endtime = datetime2
        }
      } else {
        this.Exportlist.starttime = ''
        this.Exportlist.endtime = ''
      }
      console.log(this.Exportlist)
      const data = await Element_api(this.Exportlist)
      if (data.status !== 200) {
        this.$message.error('错s了哦,这是一条错误消息')
      } else {
        const url = this.genUrl(data.data, {})
        const a = document.createElement('a')
        a.href = url
        a.download = '气象数据.csv'
        a.click()
        window.URL.revokeObjectURL(url)
      }
      this.gettimingvisiList()
    },
    genUrl(encoded, options) {
      const dataBlob = new Blob([`\ufeff${encoded}`], { type: 'text/plain;charset=utf-8' }) //返回的格式
      return window.URL.createObjectURL(dataBlob)
    }

111.png

发送请求时 data 和params 的区别

在使用axios时,注意到配置选项中包含params和data两者,以为他们是相同的,实则不然。 

  因为params是添加到url的请求字符串中的,用于get请求。 

  而data是添加到请求体(body)中的, 用于post请求。

  比如对于下面的get请求:

  axios({
    method: "get",
    url: "http://www.tuling123.com/openapi/api?key=20ff1803ff65429b809a310653c9daac",
    params: {
      info: "西安天气"
    },
  })
  
  如果我们将params修改为data,显然是不能请求成功的,因为get请求中不存在data这个选项。

生产二维码图片

<template> 这样写
<div class="img2" id="qrcode" ref="qrcodeContainer"></div>

引入二维码组件
import QRCode from 'qrcodejs2'

调用方法  建议在nextTick中
qrcode(e, n) {
      const qrcode = new QRCode(this.$refs.qrcodeContainer, {
        width: 100,
        height: 100,
        text: this.windowUrl
      })
    },

服务号生成海报图(目前做的优点瑕疵)

先用样式画好你想要生成的海报的样式

<div v-if="canvasShow">
    <canvas id="touxiang" :src="getDataUri(profileList.profile.avatar,'touxiang')" alt /> //头像
    ...
</div>
div v-else >
  <img :src="imgUrl" ref="block1" class="block1" />
</div>

// 从后端获取的图片地址在转换海报时空白,所以我先把线上图片画出来(这只是我想到是一种方法但不一定是最好的)
getDataUri(url, callback) {
      this.$nextTick(() => {
        const canvas = document.getElementById(callback)
        const cxt = canvas.getContext('2d')
        const imgUrl = new Image()
        imgUrl.setAttribute('crossOrigin', 'anonymous')
        imgUrl.src = url + '?tamp=' + (new Date()).valueOf()
        imgUrl.onload = () => {
          cxt.drawImage(imgUrl, 0, 0, canvas.width, canvas.height)
          const dataURL = canvas.toDataURL('image/png')
          return dataURL
        }
      })
    },
  
  
 点击生成海报
 this.canvasImg()

// 转换海报图
    canvasImg() {
      setTimeout(() => {
        html2canvas(this.$refs.imageDom, {
          useCORS: true, // 使用跨域
          allowTaint: false, // 允许跨域图片
          taintTest: true // 是否在渲染前测试图片
        }).then(canvas => {
          this.imgUrl = canvas.toDataURL('image/png')
          this.canvasShow = false
        })
      }, 2000)
    },

移动端点击获取当前链接到手机粘贴栏(兼容iOS系统)

// 复制
    copyText(text) {
      // 数字没有 .length 不能执行selectText 需要转化成字符串
      const textString = text.toString()
      let input = document.querySelector('#copy-input')
      if (!input) {
        input = document.createElement('input')
        input.id = 'copy-input'
        input.readOnly = 'readOnly' // 防止ios聚焦触发键盘事件
        input.style.position = 'absolute'
        input.style.left = '-1000px'
        input.style.zIndex = '-1000'
        document.body.appendChild(input)
      }
      input.value = textString
      // ios必须先选中文字且不支持 input.select();
      selectText(input, 0, textString.length)
      if (document.execCommand('copy')) {
        document.execCommand('copy')
        Toast('复制成功,快去分享吧~')
      } else {
        console.log('不兼容')
      }
      input.blur()
      // input自带的select()方法在苹果端无法进行选择,所以需要自己去写一个类似的方法
      // 选择文本。createTextRange(setSelectionRange)是input方法
      function selectText(textbox, startIndex, stopIndex) {
        if (textbox.createTextRange) { // ie
          const range = textbox.createTextRange()
          range.collapse(true)
          range.moveStart('character', startIndex)// 起始光标
          range.moveEnd('character', stopIndex - startIndex)// 结束光标
          range.select()// 不兼容苹果
        } else { // firefox/chrome
          textbox.setSelectionRange(startIndex, stopIndex)
          textbox.focus()
        }
      }
    },