简介
个人在工作用遇到的一些小问题,和比较好的方法(持续更新)
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
方法内对数组进行赋值
下载文件
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)
}
发送请求时 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()
}
}
},